master
parent
72f624b618
commit
c8858b57dd
|
|
@ -11,8 +11,12 @@ var apiTsName = dc + "-api.ts";
|
|||
var dTsName = dc + ".d.ts";
|
||||
%>
|
||||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<FormPage
|
||||
ref="formPage"
|
||||
:action-column="actionColumn"
|
||||
:left-tools="leftTools"
|
||||
:paging="paging">
|
||||
<template #searchFormItem="{ searchForm }">
|
||||
<%
|
||||
for(column in table.columns) {
|
||||
var map = tsType(column.dataType);
|
||||
|
|
@ -23,177 +27,74 @@ var dTsName = dc + ".d.ts";
|
|||
placeholder="${column.comment}"/>
|
||||
</ElFormItem>
|
||||
<%}%>
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</template>
|
||||
|
||||
<div class="tool-bar">
|
||||
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
|
||||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
|
||||
</div>
|
||||
|
||||
<ElTable v-loading="searching" :data="tableData"
|
||||
cell-class-name="table-cell"
|
||||
class="table-list"
|
||||
empty-text="暂无数据"
|
||||
header-row-class-name="table-header"
|
||||
row-key="id">
|
||||
<template #columns>
|
||||
<%
|
||||
for(column in table.columns) {
|
||||
var map = tsType(column.dataType);
|
||||
%>
|
||||
<ElTableColumn label="${column.comment}" prop="${toCamelCase(column.name)}"/>
|
||||
<%}%>
|
||||
<ElTableColumn label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<ElPopconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
confirm-button-type="danger"
|
||||
cancel-button-type="primary"
|
||||
placement="top"
|
||||
title="是否删除当前数据?"
|
||||
width="180"
|
||||
@confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
<ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<ElPagination
|
||||
layout="->, sizes, total, prev, pager, next"
|
||||
v-model:current-page="searchForm.current"
|
||||
v-model:page-size="searchForm.size"
|
||||
:total="totalCount"
|
||||
:page-sizes="[10, 20, 50, 100, 500]"
|
||||
:hide-on-single-page="false"
|
||||
:teleported="false"
|
||||
@change="paging"/>
|
||||
<${ucc}Form ref="${lcc}Form" @edit-succ="paging"/>
|
||||
<${ucc}Form ref="${lcc}Form" @edit-succ="research"/>
|
||||
</Page>
|
||||
</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 Page from '@/components/page/Page.vue'
|
||||
import { elIcons } from '@/common/element/element.ts'
|
||||
import Utils from '@/common/utils'
|
||||
import FormPage, {
|
||||
type ActionColumnType,
|
||||
type ToolType,
|
||||
} from '@/components/page/FormPage.vue'
|
||||
import type { ComponentExposed } from 'vue-component-type-helpers'
|
||||
|
||||
const totalCount = ref(0)
|
||||
const tableData = Utils.resetAble(reactive<${ucc}Types.Search${ucc}Result[]>([]))
|
||||
const searchForm = Utils.resetAble(reactive<${ucc}Types.Search${ucc}Param>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
}))
|
||||
const searching = ref(false)
|
||||
const deling = ref(false)
|
||||
const showSearchForm = ref(true)
|
||||
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
|
||||
const ${lcc}FormIns = useTemplateRef<InstanceType<typeof ${ucc}Form>>('${lcc}Form')
|
||||
|
||||
function showDialog(data?: ${ucc}Types.Search${ucc}Result) {
|
||||
${lcc}FormIns.value?.open(data)
|
||||
function research() {
|
||||
formPageIns.value?.doSearch()
|
||||
}
|
||||
|
||||
function delHandler({row}: { row: ${ucc}Types.Search${ucc}Result }) {
|
||||
deling.value = true
|
||||
${ucc}Api.del([ row.id! ])
|
||||
function paging(params: ${ucc}Types.Search${ucc}Param) {
|
||||
return ${ucc}Api.paging(params)
|
||||
}
|
||||
|
||||
const leftTools: ToolType[] = [
|
||||
{
|
||||
icon: 'Plus',
|
||||
label: '新建',
|
||||
action() {
|
||||
${lcc}FormIns.value?.open()
|
||||
},
|
||||
},
|
||||
]
|
||||
const actionColumn = reactive<ActionColumnType<${ucc}Types.Search${ucc}Result>>({
|
||||
tableActions: [
|
||||
{
|
||||
tooltip: '编辑',
|
||||
icon: 'Edit',
|
||||
action({row}) {
|
||||
${lcc}FormIns.value?.open(row)
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'Delete',
|
||||
loading: false,
|
||||
type: 'danger',
|
||||
tooltip: '删除',
|
||||
confirm: {
|
||||
title: '是否删除当前数据',
|
||||
},
|
||||
action({row}) {
|
||||
return ${ucc}Api.del([ row.id! ])
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
paging()
|
||||
return true
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
function modifyHandler({row}: { row: ${ucc}Types.Search${ucc}Result }) {
|
||||
showDialog(row)
|
||||
}
|
||||
|
||||
function addHandler() {
|
||||
showDialog()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
searchForm.$reset()
|
||||
paging()
|
||||
}
|
||||
|
||||
function paging() {
|
||||
searching.value = true
|
||||
${ucc}Api.paging(searchForm)
|
||||
.then(res => {
|
||||
totalCount.value = res.data?.total ?? 0
|
||||
tableData.$reset(res.data?.records ?? [])
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
paging()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.table-list {
|
||||
flex 1;
|
||||
margin 0 0 20px 0
|
||||
width 100%
|
||||
|
||||
:deep(.table-header) {
|
||||
color #454C59
|
||||
|
||||
th {
|
||||
background-color #EDF1F7
|
||||
font-weight 500
|
||||
position relative
|
||||
|
||||
& > div {
|
||||
display flex
|
||||
gap 5px
|
||||
align-items center
|
||||
}
|
||||
|
||||
&:not(:first-child) > div::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 1px;
|
||||
background-color: #D3D7DE;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
height 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.table-cell) {
|
||||
color #2F3540
|
||||
}
|
||||
.action-btn {
|
||||
width 100%
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
& > button {
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display flex
|
||||
justify-content space-between
|
||||
margin 0 0 20px 0
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue