5 changed files with 301 additions and 0 deletions
@ -0,0 +1,13 @@ |
|||
<template> |
|||
<{{ model.table_name }} /> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import {{ model.table_name }} from './components/{{ model.table_name }}.vue'; |
|||
|
|||
export default defineComponent({ |
|||
name: '{{ model.application }}', |
|||
components: { {{ model.table_name }} }, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="L('{{model.application}}')" |
|||
:can-fullscreen="false" |
|||
:show-ok-btn="{{ model.has_submit }}" |
|||
:width="800" |
|||
:height="500" |
|||
@register="registerModal" |
|||
{{~ if model.has_submit ~}} |
|||
@ok="handleSubmit" |
|||
{{~ end ~}} |
|||
> |
|||
<BasicForm @register="registerForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { nextTick } from 'vue'; |
|||
import { BasicForm, useForm } from '/@/components/Form'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
{{~ if model.has_submit ~}} |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
{{~ end ~}} |
|||
import { useLocalization } from '/@/hooks/abp/useLocalization'; |
|||
import { getModalFormSchemas } from '../datas/ModalData'; |
|||
import { formatToDateTime } from '/@/utils/dateUtil'; |
|||
import { {{ model.get_action }}{{ if model.has_create }}, {{ model.create_action }}{{ end }}{{ if model.has_update }}, {{ model.update_action }}{{ end }} } from '{{model.api_path}}'; |
|||
|
|||
const emits = defineEmits(['change', 'register']); |
|||
|
|||
{{~ if model.has_submit ~}} |
|||
const { createMessage } = useMessage(); |
|||
{{~ end ~}} |
|||
const { L } = useLocalization(['{{model.remote_service}}', 'AbpUi']); |
|||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
|||
layout: 'vertical', |
|||
showActionButtonGroup: false, |
|||
schemas: getModalFormSchemas(), |
|||
transformDateFunc: (date) => { |
|||
return date ? formatToDateTime(date) : ''; |
|||
}, |
|||
}); |
|||
const [registerModal, { {{ if model.has_submit }}closeModal{{ end }} }] = useModalInner((data) => { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
fetchEntity(data.{{ model.key }}) { |
|||
fetchEntity(data.{{ model.key }}); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
function fetchEntity(id: string) { |
|||
{{ model.get_action }}(id).then((dto) => { |
|||
setFieldsValue(dto); |
|||
}); |
|||
} |
|||
|
|||
{{~ if model.has_submit ~}} |
|||
function handleSubmit() { |
|||
validate().then((input) => { |
|||
{{~ if model.has_create && model.has_update ~}} |
|||
const api = input.{{ model.key }} |
|||
? {{ model.update_action }}(input.{{ model.key }}, input) |
|||
: {{ model.create_action }}(input); |
|||
{{~ else if model.has_create ~}} |
|||
const api = {{ model.create_action }}(input); |
|||
{{~ else if model.has_create ~}} |
|||
const api = {{ model.update_action }}(input.{{ model.key }}, input); |
|||
{{~ end ~}} |
|||
|
|||
api.then((dto) => { |
|||
createMessage.success(L('SuccessfullySaved')); |
|||
emits('change', dto); |
|||
closeModal(); |
|||
}); |
|||
}); |
|||
} |
|||
{{~ end ~}} |
|||
</script> |
|||
@ -0,0 +1,40 @@ |
|||
import { useLocalization } from '/@/hooks/abp/useLocalization'; |
|||
import { FormProps, FormSchema } from '/@/components/Form'; |
|||
|
|||
const { L } = useLocalization(['{{model.remote_service}}', 'AbpUi']); |
|||
{{ if model.exists_search_models }} |
|||
export function getSearchFormProps(): Partial<FormProps> { |
|||
return { |
|||
labelWidth: 100, |
|||
schemas: [ |
|||
{{~ for searchModel in model.search_models ~}} |
|||
{ |
|||
field: '{{ searchModel.name }}', |
|||
component: '{{ searchModel.component }}', |
|||
label: L('{{ searchModel.display_name }}'), |
|||
colProps: {{ searchModel.col_props }}, |
|||
}, |
|||
{{~ end ~}} |
|||
], |
|||
}; |
|||
} |
|||
{{ end }} |
|||
export function getModalFormSchemas(): FormSchema[] { |
|||
return [ |
|||
{{~ for inputModel in model.input_models ~}} |
|||
{ |
|||
field: '{{ inputModel.name }}', |
|||
component: '{{ inputModel.component }}', |
|||
label: L('{{ inputModel.display_name }}'), |
|||
{{~ if !inputModel.show ~}} |
|||
show: false, |
|||
{{~ end ~}} |
|||
{{~ if inputModel.disabled ~}} |
|||
dynamicDisabled: true, |
|||
{{~ end ~}} |
|||
colProps: {{ inputModel.col_props }}, |
|||
componentProps: {{ inputModel.component_props }}, |
|||
}, |
|||
{{~ end ~}} |
|||
]; |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
import { useLocalization } from '/@/hooks/abp/useLocalization'; |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { formatToDateTime } from '/@/utils/dateUtil'; |
|||
|
|||
const { L } = useLocalization(['{{model.remote_service}}', 'AbpUi']); |
|||
|
|||
export function getDataColumns(): BasicColumn[] { |
|||
return [ |
|||
{{~ for ouputModel in model.ouput_models ~}} |
|||
{ |
|||
title: L('{{ ouputModel.display_name }}'), |
|||
dataIndex: '{{ ouputModel.name }}', |
|||
align: '{{ ouputModel.align }}', |
|||
width: {{ ouputModel.width }}, |
|||
sorter: {{ ouputModel.sorter }}, |
|||
resizable: {{ ouputModel.resizable }}, |
|||
{{~ if !ouputModel.show ~}} |
|||
ifShow: false, |
|||
{{~ end ~}} |
|||
{{~ if ouputModel.has_date ~}} |
|||
format: (text) => { |
|||
return text ? formatToDateTime(text) : text; |
|||
}, |
|||
{{~ end ~}} |
|||
}, |
|||
{{~ end ~}} |
|||
]; |
|||
} |
|||
@ -0,0 +1,141 @@ |
|||
<template> |
|||
<div> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
{{~ if model.has_create ~}} |
|||
<Button |
|||
{{~ if model.create_permission ~}} |
|||
v-auth="['{{ model.create_permission_name }}']" |
|||
{{~ end ~}} |
|||
type="primary" |
|||
@click="handleAddNew" |
|||
> |
|||
{%{ {{ L('}%}{{ model.application }}{%{:AddNew') }} }%} |
|||
</Button> |
|||
{{~ end ~}} |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'action'"> |
|||
<TableAction |
|||
:stop-button-propagation="true" |
|||
:actions="[ |
|||
{{~ if model.has_update ~}} |
|||
{ |
|||
{{~ if model.update_permission ~}} |
|||
auth: '{{ model.update_permission_name }}', |
|||
{{~ end ~}} |
|||
label: L('Edit'), |
|||
icon: 'ant-design:edit-outlined', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
{{~ end ~}} |
|||
{{~ if model.has_delete ~}} |
|||
{ |
|||
{{~ if model.delete_permission ~}} |
|||
auth: '{{ model.delete_permission_name }}', |
|||
{{~ end ~}} |
|||
label: L('Delete'), |
|||
color: 'error', |
|||
icon: 'ant-design:delete-outlined', |
|||
onClick: handleDelete.bind(null, record), |
|||
}, |
|||
{{~ end ~}} |
|||
]" |
|||
/> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
{{~ if model.has_create || model.has_update ~}} |
|||
<{{model.modal_name}} @register="registerModal" @change="reload" /> |
|||
{{~ end ~}} |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
{{~ if model.has_create ~}} |
|||
import { Button } from 'ant-design-vue'; |
|||
{{~ end ~}} |
|||
import { BasicTable, TableAction, useTable } from '/@/components/Table'; |
|||
import { getDataColumns } from '../datas/TableData'; |
|||
import { getSearchFormProps } from '../datas/ModalData'; |
|||
{{~ if model.has_create || model.has_update ~}} |
|||
import { useModal } from '/@/components/Modal'; |
|||
{{~ end ~}} |
|||
{{~ if model.has_delete ~}} |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
{{~ end ~}} |
|||
import { useLocalization } from '/@/hooks/abp/useLocalization'; |
|||
import { {{ model.get_list_action }}{{ if model.has_delete }}, {{ model.delete_action }}{{ end }}{{ if model.has_advanced_search }}, {{ model.available_fields_action }}, {{ model.advanced_search_action }}{{ end }} } from '{{model.api_path}}'; |
|||
{{~ if model.paged_request ~}} |
|||
import { formatPagedRequest } from '/@/utils/http/abp/helper'; |
|||
{{~ end ~}} |
|||
import {{model.modal_name}} from './{{model.modal_name}}.vue'; |
|||
|
|||
const { L } = useLocalization(['{{model.remote_service}}', 'AbpUi']); |
|||
{{~ if model.has_delete ~}} |
|||
const { createConfirm, createMessage } = useMessage(); |
|||
{{~ end ~}} |
|||
{{~ if model.has_update ~}} |
|||
const [registerModal, { openModal }] = useModal(); |
|||
{{~ end ~}} |
|||
const [registerTable, { {{ if model.has_delete || model.has_create || model.has_update }}reload{{ end }} }] = useTable({ |
|||
rowKey: '{{ model.key }}', |
|||
title: L('{{model.application}}'), |
|||
api: {{ model.get_list_action }}, |
|||
columns: getDataColumns(), |
|||
{{~ if model.paged_request ~}} |
|||
beforeFetch: formatPagedRequest, |
|||
{{~ end ~}} |
|||
pagination: true, |
|||
striped: false, |
|||
useSearchForm: true, |
|||
showIndexColumn: false, |
|||
showTableSetting: true, |
|||
formConfig: getSearchFormProps(), |
|||
{{~ if model.has_advanced_search ~}} |
|||
advancedSearchConfig: { |
|||
useAdvancedSearch: true, |
|||
defineFieldApi: {{ model.available_fields_action }}, |
|||
fetchApi: {{ model.advanced_search_action }}, |
|||
}, |
|||
{{~ end ~}} |
|||
bordered: true, |
|||
canResize: true, |
|||
immediate: true, |
|||
{{~ if model.has_update || model.has_delete ~}} |
|||
actionColumn: { |
|||
width: 150, |
|||
title: L('Actions'), |
|||
dataIndex: 'action', |
|||
}, |
|||
{{~ end ~}} |
|||
}); |
|||
|
|||
{{~ if model.has_create ~}} |
|||
function handleAddNew() { |
|||
openModal(true, {}); |
|||
} |
|||
{{~ end ~}} |
|||
|
|||
{{~ if model.has_update ~}} |
|||
function handleEdit(record) { |
|||
openModal(true, record); |
|||
} |
|||
{{~ end ~}} |
|||
|
|||
{{~ if model.has_delete ~}} |
|||
function handleDelete(record) { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: L('AreYouSure'), |
|||
content: L('ItemWillBeDeletedMessage'), |
|||
onOk: () => { |
|||
return {{ model.delete_action }}(record.{{ model.key }}).then(() => { |
|||
createMessage.success(L('SuccessfullyDeleted')); |
|||
reload(); |
|||
}); |
|||
}, |
|||
}); |
|||
} |
|||
{{~ end ~}} |
|||
</script> |
|||
Loading…
Reference in new issue