master^2
parent
3bdb6185b6
commit
c9b9d03c9d
|
|
@ -12,10 +12,10 @@ var apiTsName = dc + "-api.ts";
|
|||
var dTsName = dc + ".d.ts";
|
||||
%>
|
||||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
destroy-on-close
|
||||
width="fit-content"
|
||||
@close="dialogCloseHandler">
|
||||
<ADetailPanel
|
||||
ref="detailPanel"
|
||||
v-bind="detailPanelProps">
|
||||
<template #default="detailData">
|
||||
<ElDescriptions title="${table.comment}" border>
|
||||
<%
|
||||
for(column in table.columns) {
|
||||
|
|
@ -26,35 +26,26 @@ var dTsName = dc + ".d.ts";
|
|||
</ElDescriptionsItem>
|
||||
<%}%>
|
||||
</ElDescriptions>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false" type="primary">关闭</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</ADetailPanel>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ${ucc}Api from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${apiTsName}'
|
||||
import Utils from '@/common/utils'
|
||||
import ADetailPanel, {
|
||||
type ADetailPanelInstance,
|
||||
buildDetailPanelProps,
|
||||
} from '@/components/a-detail-panel/ADetailPanel.tsx'
|
||||
|
||||
const showDialog = ref(false)
|
||||
|
||||
const detailData = Utils.resetAble(reactive<${ucc}Types.Search${ucc}Result>({}))
|
||||
|
||||
function dialogCloseHandler() {
|
||||
detailData.$reset()
|
||||
}
|
||||
const detailPanelIns = useTemplateRef<ADetailPanelInstance<${ucc}Types.Search${ucc}Result>>('detailPanel')
|
||||
const detailPanelProps = buildDetailPanelProps<${ucc}Types.Search${ucc}Result>({
|
||||
title: '${table.comment}详情',
|
||||
detailsLoader: ${ucc}Api.detail,
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
open(data: ${ucc}Types.Search${ucc}Result) {
|
||||
showDialog.value = true
|
||||
${ucc}Api.detail(data.id!)
|
||||
.then(res => {
|
||||
detailData.$reset(res.data)
|
||||
})
|
||||
}
|
||||
detailPanelIns.value?.open(data)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -11,111 +11,83 @@ var apiTsName = dc + "-api.ts";
|
|||
var dTsName = dc + ".d.ts";
|
||||
%>
|
||||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="fit-content"
|
||||
@close="dialogCloseHandler">
|
||||
<ElForm :model="formData"
|
||||
:rules="rules"
|
||||
ref="${lcc}Form"
|
||||
class="form-panel"
|
||||
label-width="auto">
|
||||
<AFormPanel
|
||||
ref="formPanel"
|
||||
v-bind="formPanelProps">
|
||||
<template #default="formData">
|
||||
<div class="form-items">
|
||||
<%
|
||||
for(column in table.columns) {
|
||||
var map = tsType(column.dataType);
|
||||
%>
|
||||
<ElFormItem label="${column.comment}" prop="${toCamelCase(column.name)}">
|
||||
<ElInput
|
||||
v-model="formData.${toCamelCase(column.name)}"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="${column.comment}"/>
|
||||
<ElInput placeholder="${column.comment}" v-model="formData.${toCamelCase(column.name)}" />
|
||||
</ElFormItem>
|
||||
<%}%>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</AFormPanel>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ${ucc}Api from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${apiTsName}'
|
||||
import AFormPanel, {
|
||||
type AFormPanelInstance,
|
||||
buildFormPanelProps,
|
||||
} from '@/components/a-form-panel/AFormPanel.tsx'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import FormUtil from '@/common/utils/formUtil.ts'
|
||||
import Utils from '@/common/utils'
|
||||
import {
|
||||
ElMessage,
|
||||
type FormInstance,
|
||||
type FormRules,
|
||||
} from 'element-plus'
|
||||
|
||||
const emits = defineEmits(['editSucc'])
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
|
||||
const ${lcc}FormIns = useTemplateRef<FormInstance>('${lcc}Form')
|
||||
|
||||
const formData = Utils.resetAble(reactive<${ucc}Types.Search${ucc}Result>({}))
|
||||
const rules = reactive<FormRules<${ucc}Types.Search${ucc}Result>>({
|
||||
const props = withDefaults(defineProps<{
|
||||
research?: () => void
|
||||
}>(), {
|
||||
research: () => {
|
||||
},
|
||||
})
|
||||
const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
|
||||
const status = ref<'add' | 'modify'>('add')
|
||||
const formPanelProps = buildFormPanelProps<${ucc}Types.Search${ucc}Result>({
|
||||
title: status.value === 'add' ? '新建${table.comment}' : '修改${table.comment}信息',
|
||||
detailsLoader(id?: string) {
|
||||
if (Strings.isBlank(id)) {
|
||||
status.value = 'add'
|
||||
return Promise.resolve()
|
||||
} else {
|
||||
status.value = 'modify'
|
||||
return ${ucc}Api
|
||||
.detail(id!)
|
||||
.then(res => res.data)
|
||||
}
|
||||
},
|
||||
doSubmit(data) {
|
||||
if (status.value === 'add') {
|
||||
return ${ucc}Api
|
||||
.add(data)
|
||||
.then(props.research)
|
||||
} else {
|
||||
return ${ucc}Api
|
||||
.modify(data)
|
||||
.then(props.research)
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
<%
|
||||
for(column in table.columns) {
|
||||
%>
|
||||
${toCamelCase(column.name)}: [{ required: true, message: '请填写${column.comment}', trigger: 'blur' }],
|
||||
<%}%>
|
||||
},
|
||||
})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
formData.$reset()
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (formData.id != null) {
|
||||
FormUtil.submit(${lcc}FormIns, () => ${ucc}Api.modify(formData))
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
FormUtil.submit(${lcc}FormIns, () => ${ucc}Api.add(formData))
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: ${ucc}Types.Search${ucc}Result = {}) {
|
||||
showDialog.value = true
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = 'modify'
|
||||
${ucc}Api.detail(data.id!)
|
||||
.then(res => {
|
||||
formData.$reset(res.data)
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
formData.$reset(data)
|
||||
}
|
||||
}
|
||||
open(data?: ${ucc}Types.Search${ucc}Result) {
|
||||
formPanelIns.value?.open(data?.id)
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.form-panel {
|
||||
padding 20px
|
||||
.form-items {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,25 +6,32 @@ var dc = toDashCase(lcc);
|
|||
|
||||
var pageVueName = ucc + ".vue";
|
||||
var formVueName = ucc + "Form.vue";
|
||||
var detailVueName = ucc + "Detail.vue";
|
||||
var pageTsName = "page.ts";
|
||||
var apiTsName = dc + "-api.ts";
|
||||
var dTsName = dc + ".d.ts";
|
||||
%>
|
||||
<template>
|
||||
<FormPage
|
||||
ref="formPage"
|
||||
:action-column="actionColumn"
|
||||
:left-tools="leftTools"
|
||||
:paging="paging">
|
||||
<template #searchFormItem="{ searchForm }">
|
||||
<ATablePage
|
||||
ref="tablePage"
|
||||
v-bind="tablePageProps">
|
||||
<template #highFormItem="formData">
|
||||
<%
|
||||
for(column in table.columns) {
|
||||
var map = tsType(column.dataType);
|
||||
%>
|
||||
<ElFormItem label="${column.comment}">
|
||||
<ElInput
|
||||
v-model="searchForm.${toCamelCase(column.name)}"
|
||||
placeholder="${column.comment}"/>
|
||||
<ElInput placeholder="${column.comment}" v-model="formData.${toCamelCase(column.name)}"/>
|
||||
</ElFormItem>
|
||||
<%}%>
|
||||
</template>
|
||||
<template #simpleFormItem="formData">
|
||||
<%
|
||||
for(column in table.columns) {
|
||||
var map = tsType(column.dataType);
|
||||
%>
|
||||
<ElFormItem>
|
||||
<ElInput placeholder="${column.comment}" v-model="formData.${toCamelCase(column.name)}"/>
|
||||
</ElFormItem>
|
||||
<%}%>
|
||||
</template>
|
||||
|
|
@ -37,31 +44,34 @@ var dTsName = dc + ".d.ts";
|
|||
<ElTableColumn label="${column.comment}" prop="${toCamelCase(column.name)}"/>
|
||||
<%}%>
|
||||
</template>
|
||||
<${ucc}Form ref="${lcc}Form" @edit-succ="research"/>
|
||||
</Page>
|
||||
<${ucc}Form ref="${lcc}Form" :research="research"/>
|
||||
<${ucc}Detail ref="${lcc}Detail"/>
|
||||
</ATablePage>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ${ucc}Api from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${apiTsName}'
|
||||
import ${ucc}Form from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${formVueName}'
|
||||
import FormPage, {
|
||||
type ActionColumnType,
|
||||
type ToolType,
|
||||
} from '@/components/page/FormPage.vue'
|
||||
import type { ComponentExposed } from 'vue-component-type-helpers'
|
||||
import ${ucc}Detail from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${detailVueName}'
|
||||
import ATablePage, {
|
||||
type ATablePageInstance,
|
||||
buildTablePageProps,
|
||||
} from '@/components/a-page/a-table-page/ATablePage.tsx'
|
||||
|
||||
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
|
||||
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
|
||||
const ${lcc}FormIns = useTemplateRef<InstanceType<typeof ${ucc}Form>>('${lcc}Form')
|
||||
const ${lcc}DetailIns = useTemplateRef<InstanceType<typeof ${ucc}Detail>>('${lcc}Detail')
|
||||
|
||||
function research() {
|
||||
formPageIns.value?.doSearch()
|
||||
tablePageIns.value?.doSearch()
|
||||
}
|
||||
|
||||
function paging(params: ${ucc}Types.Search${ucc}Param) {
|
||||
return ${ucc}Api.paging(params)
|
||||
}
|
||||
|
||||
const leftTools: ToolType[] = [
|
||||
const tablePageProps = buildTablePageProps<${ucc}Types.Search${ucc}Param, ${ucc}Types.Search${ucc}Result>({
|
||||
searchForm: {
|
||||
paging: ${ucc}Api.paging,
|
||||
},
|
||||
toolBar: {
|
||||
leftTools: [
|
||||
{
|
||||
icon: 'Plus',
|
||||
label: '新建',
|
||||
|
|
@ -69,12 +79,23 @@ const leftTools: ToolType[] = [
|
|||
${lcc}FormIns.value?.open()
|
||||
},
|
||||
},
|
||||
]
|
||||
const actionColumn = reactive<ActionColumnType<${ucc}Types.Search${ucc}Result>>({
|
||||
],
|
||||
},
|
||||
table: {
|
||||
actionColumn: {
|
||||
tableActions: [
|
||||
{
|
||||
tooltip: '详情',
|
||||
icon: 'Postcard',
|
||||
type: 'info',
|
||||
action({row}) {
|
||||
${lcc}DetailIns.value?.open(row)
|
||||
},
|
||||
},
|
||||
{
|
||||
tooltip: '编辑',
|
||||
icon: 'Edit',
|
||||
type: 'primary',
|
||||
action({row}) {
|
||||
${lcc}FormIns.value?.open(row)
|
||||
},
|
||||
|
|
@ -96,5 +117,8 @@ const actionColumn = reactive<ActionColumnType<${ucc}Types.Search${ucc}Result>>(
|
|||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue