添加表格模板页面.
This commit is contained in:
@@ -12,9 +12,6 @@ import com.orion.lang.constant.Const;
|
|||||||
import com.orion.lang.utils.ext.yml.YmlExt;
|
import com.orion.lang.utils.ext.yml.YmlExt;
|
||||||
import com.orion.ops.framework.mybatis.core.domain.BaseDO;
|
import com.orion.ops.framework.mybatis.core.domain.BaseDO;
|
||||||
import com.orion.ops.framework.mybatis.core.mapper.IMapper;
|
import com.orion.ops.framework.mybatis.core.mapper.IMapper;
|
||||||
import com.orion.ops.module.infra.enums.RoleStatusEnum;
|
|
||||||
import com.orion.ops.module.infra.enums.TestTableStatusEnum;
|
|
||||||
import com.orion.ops.module.infra.enums.UserStatusEnum;
|
|
||||||
import org.apache.ibatis.annotations.Mapper;
|
import org.apache.ibatis.annotations.Mapper;
|
||||||
|
|
||||||
import java.io.File;
|
import java.io.File;
|
||||||
@@ -41,9 +38,6 @@ public class CodeGenerator {
|
|||||||
String module = "infra";
|
String module = "infra";
|
||||||
// 生成的表
|
// 生成的表
|
||||||
GenTable[] tables = {
|
GenTable[] tables = {
|
||||||
new GenTable("test_table", "表", "test")
|
|
||||||
.vue("test", "table")
|
|
||||||
.enums(TestTableStatusEnum.class),
|
|
||||||
// new GenTable("system_user", "用户", "user")
|
// new GenTable("system_user", "用户", "user")
|
||||||
// .vue("user", "user")
|
// .vue("user", "user")
|
||||||
// .enums(UserStatusEnum.class),
|
// .enums(UserStatusEnum.class),
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
package ${currentPackage};
|
package ${currentPackage};
|
||||||
|
|
||||||
|
import com.fasterxml.jackson.annotation.JsonFormat;
|
||||||
import io.swagger.v3.oas.annotations.media.Schema;
|
import io.swagger.v3.oas.annotations.media.Schema;
|
||||||
import lombok.AllArgsConstructor;
|
import lombok.AllArgsConstructor;
|
||||||
import lombok.Builder;
|
import lombok.Builder;
|
||||||
@@ -37,6 +38,9 @@ public class ${type}CreateRequest implements Serializable {
|
|||||||
#if("$!field.comment" != "")
|
#if("$!field.comment" != "")
|
||||||
@Schema(description = "${field.comment}")
|
@Schema(description = "${field.comment}")
|
||||||
#end
|
#end
|
||||||
|
#if("$field.propertyType" == "Date")
|
||||||
|
@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
|
||||||
|
#end
|
||||||
private ${field.propertyType} ${field.propertyName};
|
private ${field.propertyType} ${field.propertyName};
|
||||||
|
|
||||||
#end
|
#end
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
package ${currentPackage};
|
package ${currentPackage};
|
||||||
|
|
||||||
|
import com.fasterxml.jackson.annotation.JsonFormat;
|
||||||
import com.orion.ops.framework.common.entity.PageRequest;
|
import com.orion.ops.framework.common.entity.PageRequest;
|
||||||
import io.swagger.v3.oas.annotations.media.Schema;
|
import io.swagger.v3.oas.annotations.media.Schema;
|
||||||
import lombok.*;
|
import lombok.*;
|
||||||
@@ -29,6 +30,9 @@ public class ${type}QueryRequest extends PageRequest {
|
|||||||
#if("$!field.comment" != "")
|
#if("$!field.comment" != "")
|
||||||
@Schema(description = "${field.comment}")
|
@Schema(description = "${field.comment}")
|
||||||
#end
|
#end
|
||||||
|
#if("$field.propertyType" == "Date")
|
||||||
|
@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
|
||||||
|
#end
|
||||||
private ${field.propertyType} ${field.propertyName};
|
private ${field.propertyType} ${field.propertyName};
|
||||||
#end
|
#end
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
package ${currentPackage};
|
package ${currentPackage};
|
||||||
|
|
||||||
|
import com.fasterxml.jackson.annotation.JsonFormat;
|
||||||
import io.swagger.v3.oas.annotations.media.Schema;
|
import io.swagger.v3.oas.annotations.media.Schema;
|
||||||
import lombok.AllArgsConstructor;
|
import lombok.AllArgsConstructor;
|
||||||
import lombok.Builder;
|
import lombok.Builder;
|
||||||
@@ -36,6 +37,9 @@ public class ${type}UpdateRequest implements Serializable {
|
|||||||
#if("$!field.comment" != "")
|
#if("$!field.comment" != "")
|
||||||
@Schema(description = "${field.comment}")
|
@Schema(description = "${field.comment}")
|
||||||
#end
|
#end
|
||||||
|
#if("$field.propertyType" == "Date")
|
||||||
|
@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
|
||||||
|
#end
|
||||||
private ${field.propertyType} ${field.propertyName};
|
private ${field.propertyType} ${field.propertyName};
|
||||||
#end
|
#end
|
||||||
|
|
||||||
|
|||||||
@@ -27,7 +27,10 @@
|
|||||||
#if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
|
#if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
|
||||||
<a-input-number v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" />
|
<a-input-number v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" />
|
||||||
#elseif("$field.propertyType" == "Date")
|
#elseif("$field.propertyType" == "Date")
|
||||||
<a-date-picker v-model="formModel.${field.propertyName}" placeholder="请选择${field.comment}" show-time />
|
<a-date-picker v-model="formModel.${field.propertyName}"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择${field.comment}"
|
||||||
|
show-time />
|
||||||
#else
|
#else
|
||||||
<a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" />
|
<a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" />
|
||||||
#end
|
#end
|
||||||
@@ -61,7 +64,7 @@
|
|||||||
const defaultForm = () => {
|
const defaultForm = () => {
|
||||||
return {
|
return {
|
||||||
#foreach($field in ${table.fields})
|
#foreach($field in ${table.fields})
|
||||||
${field.propertyName}: underfined,
|
${field.propertyName}: undefined,
|
||||||
#end
|
#end
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1 +1,197 @@
|
|||||||
table
|
<template>
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<a-card class="general-card table-search-card">
|
||||||
|
<a-query-header :model="formModel"
|
||||||
|
label-align="left"
|
||||||
|
@submit="fetchTableData"
|
||||||
|
@reset="fetchTableData">
|
||||||
|
#foreach($field in ${table.fields})
|
||||||
|
<!-- $field.comment -->
|
||||||
|
<a-form-item field="${field.propertyName}" label="${field.comment}" label-col-flex="60px">
|
||||||
|
#if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
|
||||||
|
<a-input-number v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear/>
|
||||||
|
#elseif("$field.propertyType" == "Date")
|
||||||
|
<a-date-picker v-model="formModel.${field.propertyName}"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择${field.comment}"
|
||||||
|
show-time
|
||||||
|
allow-clear/>
|
||||||
|
#else
|
||||||
|
<a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear/>
|
||||||
|
#end
|
||||||
|
</a-form-item>
|
||||||
|
#end
|
||||||
|
</a-query-header>
|
||||||
|
</a-card>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<a-card class="general-card table-card">
|
||||||
|
<template #title>
|
||||||
|
<div class="table-title">
|
||||||
|
${table.comment}列表
|
||||||
|
</div>
|
||||||
|
<div class="table-bar-handle">
|
||||||
|
<a-space>
|
||||||
|
<!-- 新增 -->
|
||||||
|
<a-button type="primary"
|
||||||
|
v-permission="['${package.ModuleName}:${typeHyphen}:create']"
|
||||||
|
@click="emits('openAdd')">
|
||||||
|
新增
|
||||||
|
<template #icon>
|
||||||
|
<icon-plus />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
<!-- 删除 -->
|
||||||
|
<a-popconfirm position="br"
|
||||||
|
type="warning"
|
||||||
|
:content="`确认删除选中的${selectedKeys.length}条记录吗?`"
|
||||||
|
@ok="deleteSelectRows">
|
||||||
|
<a-button v-permission="['${package.ModuleName}:${typeHyphen}:delete']"
|
||||||
|
type="secondary"
|
||||||
|
status="danger"
|
||||||
|
:disabled="selectedKeys.length === 0">
|
||||||
|
删除
|
||||||
|
<template #icon>
|
||||||
|
<icon-delete />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- table -->
|
||||||
|
<a-table row-key="id"
|
||||||
|
class="table-wrapper-8"
|
||||||
|
ref="tableRef"
|
||||||
|
label-align="left"
|
||||||
|
:loading="loading"
|
||||||
|
:columns="columns"
|
||||||
|
v-model:selectedKeys="selectedKeys"
|
||||||
|
:row-selection="rowSelection"
|
||||||
|
:data="tableRenderData"
|
||||||
|
:pagination="pagination"
|
||||||
|
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
|
||||||
|
@page-size-change="(size) => fetchTableData(pagination.current, size)"
|
||||||
|
:bordered="false">
|
||||||
|
<!-- 操作 -->
|
||||||
|
<template #handle="{ record }">
|
||||||
|
<div class="table-handle-wrapper">
|
||||||
|
<!-- 修改 -->
|
||||||
|
<a-button type="text"
|
||||||
|
size="mini"
|
||||||
|
v-permission="['${package.ModuleName}:${typeHyphen}:update']"
|
||||||
|
@click="emits('openUpdate', record)">
|
||||||
|
修改
|
||||||
|
</a-button>
|
||||||
|
<!-- 删除 -->
|
||||||
|
<a-popconfirm content="确认删除这条记录吗?"
|
||||||
|
position="left"
|
||||||
|
type="warning"
|
||||||
|
@ok="deleteRow(record)">
|
||||||
|
<a-button type="text" size="mini"
|
||||||
|
status="danger"
|
||||||
|
v-permission="['${package.ModuleName}:${typeHyphen}:delete']">
|
||||||
|
删除
|
||||||
|
</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: '${vue.module}-${vue.feature}-table'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { batchDelete${vue.featureFirstUpper}, delete${vue.featureFirstUpper}, get${vue.featureFirstUpper}Page, ${vue.featureFirstUpper}QueryRequest, ${vue.featureFirstUpper}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
|
||||||
|
import { Message } from '@arco-design/web-vue';
|
||||||
|
import useLoading from '@/hooks/loading';
|
||||||
|
import columns from '../types/table.columns';
|
||||||
|
import { defaultPagination, defaultRowSelection } from '@/types/table';
|
||||||
|
|
||||||
|
const tableRenderData = ref<${vue.featureFirstUpper}QueryResponse[]>();
|
||||||
|
const { loading, setLoading } = useLoading();
|
||||||
|
const emits = defineEmits(['openAdd', 'openUpdate']);
|
||||||
|
|
||||||
|
const pagination = reactive(defaultPagination());
|
||||||
|
const selectedKeys = ref<number[]>([]);
|
||||||
|
const rowSelection = reactive(defaultRowSelection());
|
||||||
|
|
||||||
|
const formModel = reactive<${vue.featureFirstUpper}QueryRequest>({
|
||||||
|
#foreach($field in ${table.fields})
|
||||||
|
${field.propertyName}: undefined,
|
||||||
|
#end
|
||||||
|
});
|
||||||
|
|
||||||
|
// 删除选中行
|
||||||
|
const deleteSelectRows = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
// 调用删除接口
|
||||||
|
await batchDelete${vue.featureFirstUpper}(selectedKeys.value);
|
||||||
|
Message.success(`成功删除${selectedKeys.value.length}条数据`);
|
||||||
|
selectedKeys.value = [];
|
||||||
|
// 重新加载数据
|
||||||
|
await fetchTableData();
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除当前行
|
||||||
|
const deleteRow = async ({ id }: { id: number }) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
// 调用删除接口
|
||||||
|
await delete${vue.featureFirstUpper}(id);
|
||||||
|
Message.success('删除成功');
|
||||||
|
// 重新加载数据
|
||||||
|
await fetchTableData();
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加后回调
|
||||||
|
const addedCallback = () => {
|
||||||
|
fetchTableData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新后回调
|
||||||
|
const updatedCallback = () => {
|
||||||
|
fetchTableData();
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
addedCallback, updatedCallback
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
const doFetchTableData = async (request: ${vue.featureFirstUpper}QueryRequest) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const { data } = await get${vue.featureFirstUpper}Page(request);
|
||||||
|
tableRenderData.value = data.rows;
|
||||||
|
pagination.total = data.total;
|
||||||
|
pagination.current = request.page;
|
||||||
|
pagination.pageSize = request.limit;
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换页码
|
||||||
|
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
|
||||||
|
doFetchTableData({ page, limit, ...form });
|
||||||
|
};
|
||||||
|
fetchTableData();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -2,12 +2,12 @@
|
|||||||
<div class="layout-container">
|
<div class="layout-container">
|
||||||
<!-- 表格 -->
|
<!-- 表格 -->
|
||||||
<${vue.feature}-table ref="table"
|
<${vue.feature}-table ref="table"
|
||||||
@openAdd="() => modal.openAdd()"
|
@openAdd="() => modal.openAdd()"
|
||||||
@openUpdate="(e) => modal.openUpdate(e)" />
|
@openUpdate="(e) => modal.openUpdate(e)" />
|
||||||
<!-- 添加修改框 -->
|
<!-- 添加修改框 -->
|
||||||
<${vue.feature}-form-modal ref="modal"
|
<${vue.feature}-form-modal ref="modal"
|
||||||
@added="() => table.addedCallback()"
|
@added="() => table.addedCallback()"
|
||||||
@updated="() => table.updatedCallback()" />
|
@updated="() => table.updatedCallback()" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import ${vue.featureFirstUpper}Table from './components/${vue.feature}-table.vue';
|
import ${vue.featureFirstUpper}Table from './components/${vue.feature}-table.vue';
|
||||||
import ${vue.featureFirstUpper}Modal from './components/${vue.feature}-form-modal.vue';
|
import ${vue.featureFirstUpper}FormModal from './components/${vue.feature}-form-modal.vue';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const table = ref();
|
const table = ref();
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||||
import { formatMilliSecond, YMD_HMS } from '@/utils';
|
import { dateFormat } from '@/utils';
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
@@ -14,24 +14,27 @@ const columns = [
|
|||||||
dataIndex: '${field.propertyName}',
|
dataIndex: '${field.propertyName}',
|
||||||
slotName: '${field.propertyName}',
|
slotName: '${field.propertyName}',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 100,
|
|
||||||
#if(${field.propertyType} == 'String')
|
#if(${field.propertyType} == 'String')
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: true,
|
tooltip: true,
|
||||||
|
#elseif(${field.propertyType} == 'Date')
|
||||||
|
render: ({ record }) => {
|
||||||
|
return dateFormat(new Date(record.${field.propertyName}));
|
||||||
|
},
|
||||||
#end
|
#end
|
||||||
}, #end#end{
|
}, #end#end{
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
dataIndex: 'createTime',
|
dataIndex: 'createTime',
|
||||||
slotName: 'createTime',
|
slotName: 'createTime',
|
||||||
render: ({ record }) => {
|
render: ({ record }) => {
|
||||||
return formatMilliSecond(record.createTime, YMD_HMS);
|
return dateFormat(new Date(record.createTime));
|
||||||
},
|
},
|
||||||
}, {
|
}, {
|
||||||
title: '修改时间',
|
title: '修改时间',
|
||||||
dataIndex: 'updateTime',
|
dataIndex: 'updateTime',
|
||||||
slotName: 'updateTime',
|
slotName: 'updateTime',
|
||||||
render: ({ record }) => {
|
render: ({ record }) => {
|
||||||
return formatMilliSecond(record.createTime, YMD_HMS);
|
return dateFormat(new Date(record.createTime));
|
||||||
},
|
},
|
||||||
}, {
|
}, {
|
||||||
title: '创建人',
|
title: '创建人',
|
||||||
|
|||||||
Reference in New Issue
Block a user