代码生成器-前端列表页面模板
This commit is contained in:
TinyAnts
parent
5b108d78b7
commit
24eba2bc1f
|
|
@ -1,5 +1,6 @@
|
|||
package com.hxkj.generator.util;
|
||||
|
||||
import com.hxkj.common.utils.ArrayUtil;
|
||||
import com.hxkj.common.utils.StringUtil;
|
||||
import com.hxkj.generator.config.GenConfig;
|
||||
import com.hxkj.generator.constant.GenConstants;
|
||||
|
|
@ -41,9 +42,11 @@ public class VelocityUtil {
|
|||
*/
|
||||
public static VelocityContext prepareContext(GenTable table, List<GenTableColumn> columns) {
|
||||
boolean isSearch = false; // 是否需要搜索
|
||||
List<String> allFields = new LinkedList<>(); // 所有字段
|
||||
List<String> listFields = new LinkedList<>(); // 列表字段
|
||||
String primaryKey = "id"; // 主键字段名称
|
||||
List<String> allFields = new LinkedList<>(); // 所有字段
|
||||
List<String> listFields = new LinkedList<>(); // 列表字段
|
||||
List<String> detailFields = new LinkedList<>(); // 详情字段
|
||||
List<String> dictFields = new LinkedList<>(); // 字段字段
|
||||
for (GenTableColumn column : columns) {
|
||||
allFields.add(column.getColumnName());
|
||||
if (column.getIsList() == 1) {
|
||||
|
|
@ -55,6 +58,12 @@ public class VelocityUtil {
|
|||
if (column.getIsQuery() == 1) {
|
||||
isSearch = true;
|
||||
}
|
||||
if (column.getIsPk() == 1) {
|
||||
primaryKey = column.getJavaField();
|
||||
}
|
||||
if (StringUtil.isNotEmpty(column.getDictType())) {
|
||||
dictFields.add(column.getDictType());
|
||||
}
|
||||
}
|
||||
|
||||
// 设置模板变量
|
||||
|
|
@ -70,9 +79,11 @@ public class VelocityUtil {
|
|||
velocityContext.put("table", table);
|
||||
velocityContext.put("columns", columns);
|
||||
velocityContext.put("dateFields", SqlConstants.COLUMN_TIME_NAME);
|
||||
velocityContext.put("primaryKey", primaryKey);
|
||||
velocityContext.put("allFields", allFields);
|
||||
velocityContext.put("listFields", listFields);
|
||||
velocityContext.put("detailFields", detailFields);
|
||||
velocityContext.put("dictFields", ArrayUtil.listToStringByStr(dictFields,","));
|
||||
velocityContext.put("isSearch", isSearch);
|
||||
return velocityContext;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<el-form
|
||||
class="mb-[-16px]"
|
||||
:model="queryParams"
|
||||
inline
|
||||
>
|
||||
<div class="index-lists">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
|
||||
#foreach ($column in $columns)
|
||||
#if($column.isQuery==1)
|
||||
<el-form-item label="${column.columnComment}" prop="type">
|
||||
<el-input class="w-56" v-model="queryParams.${column.javaField}" clearable placeholder="请输入${column.columnComment}" />
|
||||
#if($column.htmlType=="datetime")
|
||||
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
|
||||
<data-picker
|
||||
v-model:startTime="queryParams.startTime"
|
||||
v-model:endTime="queryParams.endTime"
|
||||
/>
|
||||
</el-form-item>
|
||||
#elseif($column.htmlType=="select")
|
||||
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
|
||||
<el-select
|
||||
v-model="queryParams.${column.javaField}"
|
||||
class="w-56"
|
||||
clearable
|
||||
>
|
||||
#if($column.dictType=="")
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
#else
|
||||
<el-option label="全部" value="" />
|
||||
<el-option
|
||||
v-for="(item, index) in dictData.${column.dictType}"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
#end
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
#elseif($column.htmlType=="input")
|
||||
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
|
||||
<el-input class="w-56" v-model="queryParams.${column.javaField}" />
|
||||
</el-form-item>
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
<el-form-item>
|
||||
|
|
@ -19,112 +44,102 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<el-button v-perms="['config/add']" type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="['config/delete']"
|
||||
:disabled="!selectData.length"
|
||||
@click="handleDelete(selectData)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<div class="mt-4">
|
||||
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
#foreach ($column in $columns)
|
||||
#if($column.isList==1)
|
||||
<el-table-column label="${column.columnComment}" prop="${column.javaField}" />
|
||||
#end
|
||||
#end
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-perms="['config/edit']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="['config/delete']"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleDelete(row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<el-button v-perms="['dept.jobs/add']" type="primary" @click="handleAdd()">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="flex mt-4 justify-end">
|
||||
<el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
|
||||
#foreach ($column in $columns)
|
||||
#if($column.isList)
|
||||
#if($column.htmlType=="select")
|
||||
<el-table-column label="${column.columnComment}" prop="isStop" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<dict-value :options="dictData.${column.dictType}" :value="row.${column.javaField}" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
#elseif ($column.htmlType=="datetime")
|
||||
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="180" />
|
||||
#else
|
||||
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100" />
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-perms="['${moduleName}:edit']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="['${moduleName}:del']"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleDelete(row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
<edit-popup
|
||||
v-if="showEdit"
|
||||
ref="editRef"
|
||||
:dict-data="dictData"
|
||||
@success="getLists"
|
||||
@close="showEdit = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ${moduleName}Delete, ${moduleName}Lists } from '@/api/${moduleName}'
|
||||
import { useDictData } from '@/hooks/useDictOptions'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { dictDataLists } from '@/api/setting/dict'
|
||||
import { apiConfigLists, apiConfigDelete } from '@/api/config'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import feedback from '@/utils/feedback'
|
||||
import EditPopup from './edit.vue'
|
||||
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
// 是否显示编辑框
|
||||
const showEdit = ref(false)
|
||||
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
type: '',
|
||||
name: '',
|
||||
value: ''
|
||||
#foreach ($column in $columns)
|
||||
#if($column.isQuery)
|
||||
${column.javaField}: '',
|
||||
#end
|
||||
#end
|
||||
})
|
||||
|
||||
// 选中数据
|
||||
const selectData = ref<any[]>([])
|
||||
|
||||
// 表格选择后回调事件
|
||||
const handleSelectionChange = (val: any[]) => {
|
||||
selectData.value = val.map(({ id }) => id)
|
||||
}
|
||||
|
||||
// 字典数据
|
||||
const dictData = reactive<Record<string, any[]>>({
|
||||
|
||||
})
|
||||
|
||||
// 获取字典数据
|
||||
const getDictData = () => {
|
||||
|
||||
}
|
||||
|
||||
// 分页相关
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
fetchFun: apiConfigLists,
|
||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
||||
fetchFun: ${moduleName}Lists,
|
||||
params: queryParams
|
||||
})
|
||||
#if($dictFields!="")
|
||||
|
||||
const { dictData } = useDictData<{
|
||||
#foreach ($column in $columns)
|
||||
#if($column.dictType!="")
|
||||
${column.dictType}: any[]
|
||||
#end
|
||||
#end
|
||||
}>([${dictFields}])
|
||||
#end
|
||||
|
||||
// 添加
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add')
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
|
|
@ -132,14 +147,11 @@
|
|||
editRef.value?.setFormData(data)
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (id: number | any[]) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await apiConfigDelete({ id })
|
||||
const handleDelete = async (${primaryKey}: number) => {
|
||||
await ${moduleName}Delete({ ${primaryKey} })
|
||||
feedback.msgSuccess('删除成功')
|
||||
getLists()
|
||||
}
|
||||
|
||||
getLists()
|
||||
getDictData()
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue