nailaoyun-open-source/nl-mall-api
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

前端模板

Browse Source
This commit is contained in:
年糕崽崽
2025-05-13 10:39:21 +08:00
parent 095d5dccb1
commit 636fc411d2
10 changed files with 484 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/Http/Controllers/core/CodeGenerationController.php Normal file
View File

@@ -0,0 +1,41 @@
<?php
namespace App\Http\Controllers\core;
use App\BaseApp\BaseController;
use App\Service\core\CodeGenerationService;
use App\Service\LoginService;
use Illuminate\Http\JsonResponse;
class CodeGenerationController extends BaseController
{
//
public function __construct()
{
parent::__construct();
$this->service = CodeGenerationService::getInstance();
}
public function generation()
{
// $this->insertField = [
// 'class_name',
// 'class_comment',
// 'sort',
// 'icon',
// 'pid',
// 'field',
// ];
//
// $params = $this->checkRequiredFields(request()->post());
$params = json_decode('{"class_name":"testTemplate","class_comment":"测试代码生成","sort":"9999999","icon":"ant-design:api-outlined","pid":14,"field":[{"name":"name","type":"VARCHAR","type_number":"32","default":null,"comment":"测试名称","null":true,"formShow":true,"tableShow":true,"search":true,"searchValue":"like","formType":"VbenInput"},{"name":"test_name_1","type":"VARCHAR","type_number":"32","default":null,"comment":"测试名称","null":true,"formShow":true,"tableShow":true,"search":true,"searchValue":"like","formType":"VbenInput"}]}', true);
// ds($params);
return $this->service->generate($params);
// return jok(
// $this->service->generate([])
// );
}
}

38
app/Http/Controllers/core/codeGenerationController.php
View File

@@ -1,38 +0,0 @@
<?php
namespace App\Http\Controllers\core;
use App\BaseApp\BaseController;
use App\Service\core\CodeGenerationService;
use App\Service\LoginService;
use Illuminate\Http\JsonResponse;
class codeGenerationController extends BaseController
{
//
public function __construct()
{
parent::__construct();
$this->service = CodeGenerationService::getInstance();
}
public function generation()
{
$this->insertField = [
'class_name',
'class_comment',
'sort',
'icon',
'pid',
'field',
];
$params = $this->checkRequiredFields(request()->post());
return $this->service->generate($params);
// return jok(
// $this->service->generate([])
// );
}
}

158
app/Service/core/CodeGenerationService.php
View File

@@ -2,18 +2,12 @@
namespace App\Service\core;
use App\BaseApp\BaseNotAuthService;
use App\Models\AdminModel;
use App\Service\common\JWTService;
use App\Service\common\UtilsService;
use Exception;
use Illuminate\Http\JsonResponse;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
use ZipArchive;
class CodeGenerationService
{
@@ -33,6 +27,8 @@ class CodeGenerationService
private ?UtilsService $utils;
private string $uniqid = '';
private string $tempDir = '';
// 大驼峰
private string $upperCamelCase = '';
@@ -85,34 +81,25 @@ class CodeGenerationService
public function download(): BinaryFileResponse|JsonResponse
{
try {
// 模块名称
$moduleName = '会员模块';
// 检查/app/public/zip/code-generation/
if (!Storage::exists('zip/code-generation')) {
Storage::makeDirectory('zip/code-generation');
}
// 生成唯一的临时目录名
$tempDir = 'temp/templates/'. $moduleName. '-' . uniqid();
Storage::makeDirectory($tempDir);
// 获取模板文件内容
$templatePath = app_path('template/api/TemplateController.php');
if (!File::exists($templatePath)) {
return response()->json(['error' => '模板文件不存在'], 404);
}
$templateContent = File::get($templatePath);
$tempFilePath = "{$tempDir}/TemplateController.php";
Storage::put($tempFilePath, $templateContent);
// 将后端模板文件内容写入临时目录中
$tempFilePath = "{$this->tempDir}/api/{$this->upperCamelCase}Controller.php";
Storage::put($tempFilePath, $this->tmpFile['server']['controller']);
$tempFilePath = "{$this->tempDir}/api/{$this->upperCamelCase}Service.php";
Storage::put($tempFilePath, $this->tmpFile['server']['service']);
$tempFilePath = "{$this->tempDir}/api/{$this->upperCamelCase}Model.php";
Storage::put($tempFilePath, $this->tmpFile['server']['model']);
// 创建ZipService实例
$zip = new ZipService();
$zipFile = storage_path("/app/public/zip/code-generation/{$moduleName}.zip");//生成压缩文件的路径
$path = app_path('template');//被压缩文件夹的路径
$zip->zip($zipFile ,$path );
// 生成压缩文件的路径
$zipFile = storage_path("/app/public/zip/code-generation/{$this->classComment}-{$this->uniqid}.zip");
// 被压缩文件夹的路径
$path = Storage::path($this->tempDir);
// 执行文件压缩
$zip->zip($zipFile, $path);
// 返回下载 $path 文件流
return response()->download($zipFile, "{$moduleName}.zip", ['Content-Type' => 'application/zip']);
return response()->download($zipFile, "{$this->classComment}-{$this->uniqid}.zip", ['Content-Type' => 'application/zip']);
} catch (\Exception $e) {
return response()->json([
'error' => '生成模板文件失败',
@@ -123,12 +110,24 @@ class CodeGenerationService
private function init()
{
// 生成uuid
$this->uniqid = uniqid();
// 处理类名、表名
$this->upperCamelCase = ucfirst($this->param['class_name']);
$this->lowerCamelCase = lcfirst($this->param['class_name']);
$this->underLineCase = strtolower(preg_replace('/([A-Z])/', '_$1', $this->param['class_name']));
$this->dashCase = str_replace('_', '-', $this->underLineCase);
$this->classComment = $this->param['class_comment'];
// 生成文件
// 检查/app/public/zip/code-generation/目录是否存在，如果不存在则创建
if (!Storage::exists('zip/code-generation')) {
Storage::makeDirectory('zip/code-generation');
}
// 生成唯一的临时目录名
$this->tempDir = 'temp/templates/' . $this->upperCamelCase . '-' . $this->uniqid;
Storage::makeDirectory($this->tempDir);
}
/**
@@ -156,32 +155,22 @@ class CodeGenerationService
$this->genRoute();
// 执行sql
$this->querySql();
ds([
'data' => [
'sql' => $this->sql,
'upperCamelCase' => $this->upperCamelCase,
'lowerCamelCase' => $this->lowerCamelCase,
'underLineCase' => $this->underLineCase,
'dashCase' => $this->dashCase,
'classComment' => $this->classComment,
],
'tmp' => $this->tmpFile,
'params' => $this->param,
]);
// 生成视图
$this->genViews();
// // 生成菜单
// $this->genMenu();
return $this->download();
// // 生成导出层
// $this->genExport();
// // 生成导入层
// $this->genImport();
// // 生成视图
// $this->genViews();
// // 生成菜单
// $this->genMenu();
} catch (Exception $e) {
DB::rollBack();
ds([
'error' => '生成代码失败',
'message' => $e->getMessage(),
'line' => $e->getLine(),
'file' => $e->getFile(),
]);
$this->utils->errorThrow($e->getMessage());
}
@@ -197,7 +186,7 @@ class CodeGenerationService
*/
public function genDatabase(): bool
{
$tableName = config('database.prefix', 'nl_'). $this->underLineCase;
$tableName = config('database.prefix', 'nl_') . $this->underLineCase;
// 默认sql语句
$sql = "CREATE TABLE `{$tableName}` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID', ";
@@ -329,23 +318,31 @@ class CodeGenerationService
// );
// }
//
// /**
// * 生成前端部分文件
// * @return void
// */
// private function genViews(): void
// {
// foreach ($this->tmpPath['view'] as $k => $v) {
// $this->utils->createFileHolder($this->baseViewPath . $this->newPath['view_folder'][$k]);
// $this->strReplaceTmp(
// $this->basePath . $v,
// $this->baseViewPath . $this->newPath['view'][$k],
// 'view',
// $k
// );
// }
// }
//
/**
* 生成前端部分文件
* @return void
*/
private function genViews(): void
{
$appPath = app_path();
$viewList = [
'view-api' => 'api/index.ts',
'view-modal' => 'components/modal.vue',
'view-form' => 'config/form.ts',
'view-search' => 'config/search.ts',
'view-table' => 'config/table.ts',
'view-index' => 'index.vue',
];
foreach ($viewList as $k => $v) {
$this->strReplaceTmp(
$appPath. '/template/view/' . $v,
$this->tempDir. "/view/{$this->dashCase}/" . $v,
'view',
$k
);
}
}
// /**
// * 生成菜单/授权
// *
@@ -354,7 +351,6 @@ class CodeGenerationService
// */
// private function genMenu(): void
// {
// ds(123);
// RoleService::getInstance()->createRoleMenuRelation(UsersEnum::ADMIN_ID, MenuService::getInstance()->save($this->menu));
// }
@@ -372,11 +368,13 @@ class CodeGenerationService
$tmpFile = file_get_contents($template);
$newFile = str_replace('upperCamelCase', $this->upperCamelCase, $tmpFile);
$newFile = str_replace('lowerCamelCase', $this->lowerCamelCase, $newFile);
$newFile = str_replace('dashCase', $this->dashCase, $newFile);
$newFile = str_replace('模板名称', $this->classComment, $newFile);
switch ($fileKey) {
case 'service':
$newFile = str_replace("'tmpSelectField'", $this->selectField . ', "status", "created_at", "updated_at", "deleted_at"', $newFile);
$newFile = str_replace("tmpSearchField", $this->searchField . ',status@=', $newFile);
$newFile = str_replace("tmpSearchField", $this->searchField . ',status=', $newFile);
break;
case 'controller':
$newFile = str_replace("'temInsertField'", '"' . $this->insertField . '"', $newFile);
@@ -392,18 +390,24 @@ class CodeGenerationService
case 'model':
$newFile = str_replace('underLineCase', cc_camel_case_to_underscore($this->underLineCase), $newFile);
break;
case 'data':
$newFile = str_replace("// 测试列表字段", $this->viewData, $newFile);
$newFile = str_replace("// 测试搜索字段", $this->viewSearch, $newFile);
$newFile = str_replace("// 测试表单字段", $this->viewForm, $newFile);
case 'view-form':
$newFile = str_replace("// 生成的表单字段", "// 生成的表单字段 \r ". $this->viewForm, $newFile);
break;
case 'view-search':
$newFile = str_replace("// 生成的搜索字段", "// 生成的搜索字段 \r ". $this->viewSearch, $newFile);
break;
case 'view-table':
$newFile = str_replace("// 生成的列表字段", "// 生成的列表字段 \r ". $this->viewData, $newFile);
break;
}
$this->tmpFile[$type][$fileKey] = $newFile;
if (!file_exists($path)) {
if (!file_exists($path) && in_array($fileKey, ['controller', 'service', 'model'])) {
$this->utils->createFile($path);
file_put_contents($path, $newFile);
} else {
Storage::put($path, $newFile);
}
file_put_contents($path, $newFile);
}
/**
@@ -421,15 +425,15 @@ class CodeGenerationService
}
// 设置表单字段
if ($item['formShow']) {
$isNull = $item['null'] == 1 ? 'true' : 'false';
$isNull = $item['null'] == 1 ? 'required' : '';
$this->insertField .= !empty($this->insertField) ? '","' . $item['name'] : $item['name'];
$this->updateField .= !empty($this->updateField) ? '","' . $item['name'] : 'id","' . $item['name'];
$this->viewForm .= "{\n field: '" . $item['name'] . "',\n label: '" . $item['comment'] . "',\n component: '" . $item['formType'] . "',\n required: " . $isNull . ",\n },\n ";
$this->viewForm .= "{\n fieldName: '" . $item['name'] . "',\n label: '" . $item['comment'] . "',\n component: '" . $item['formType'] . "',\n rules: " . $isNull . ",\n },\n ";
}
// 设置搜索字段
if ($item['search']) {
$this->viewSearch .= "{\n field: '" . $item['name'] . "',\n label: '" . $item['comment'] . "',\n component: '" . $item['formType'] . "',\n colProps: { span: 8 },\n },\n ";
$this->searchField .= !empty($this->searchField) ? ',' . $item['name'] . '@' . $item['searchValue'] : $item['name'] . '@' . $item['searchValue'];
$this->viewSearch .= "{\n fieldName: '" . $item['name'] . "',\n label: '" . $item['comment'] . "',\n component: '" . $item['formType'] . "',\n },\n ";
$this->searchField .= !empty($this->searchField) ? ',' . $item['name'] . '\' => \'' . $item['searchValue'] : $item['name'] . '\' => \'' . $item['searchValue'];
}
// // 设置导出字段
// $this->exportField .= !empty($this->exportField) ? ',"' . $item['comment'] . '"' : '"' . $item['comment'] . '"';
@@ -437,7 +441,7 @@ class CodeGenerationService
// // 设置导入字段
// $this->importField .= "'" . $item['name'] . "' => \$row['" . $item['comment'] . "'],\n ";
// 设置视图数据字段
$this->viewData .= "{\n title: '" . $item['comment'] . "',\n dataIndex: '" . $item['name'] . "',\n },\n ";
$this->viewData .= "{ field: '{$item['name']}', title: '{$item['comment']}' },\n ";
}
/**

42
app/template/view/api/index.ts Normal file
View File

@@ -0,0 +1,42 @@
import { requestClient } from '#/api/request';
const prefix = 'dashCase/';
/**
* 分页查询用户列表
* @param data
*/
export async function getupperCamelCaseList(data: any) {
return requestClient.get<any>(`${prefix}list`, { params: data });
}
/**
* 获取模板名称详情
* @param id
*/
export async function getupperCamelCaseInfo(id: number) {
return requestClient.get<any>(`${prefix}detail`, { params: { id } });
}
/**
* 新增模板名称
* @param data
*/
export async function createupperCamelCase(data: Record<string, any>) {
return requestClient.post<any>(`${prefix}create`, data);
}
/**
* 编辑模板名称
* @param data
*/
export async function updateupperCamelCase(data: Record<string, any>) {
return requestClient.post<any>(`${prefix}update`, data);
}
/**
* 删除模板名称
* @param data
*/
export async function deleteupperCamelCase(data: Record<string, any>) {
return requestClient.post<any>(`${prefix}delete`, data);
}

62
app/template/view/components/modal.vue Normal file
View File

@@ -0,0 +1,62 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createupperCamelCase, updateupperCamelCase } from '../api';
import { modalFormProps } from '../config/form';
defineOptions({
name: 'upperCamelCaseDemo',
});
const isUpdate = ref(false);
const gridApi = ref();
const [Form, formApi] = useVbenForm(modalFormProps);
const [Modal, modalApi] = useVbenModal({
fullscreenButton: false,
draggable: true,
onCancel() {
modalApi.close();
},
onConfirm: async () => {
formApi.validate().then(async (e: any) => {
if (e.valid) {
const values = await formApi.getValues();
modalApi.setState({ loading: true, confirmLoading: true });
const submitApi = isUpdate.value ? updateupperCamelCase : createupperCamelCase;
submitApi(values)
.then(() => {
message.success('保存成功');
gridApi.value?.reload();
modalApi.close();
})
.finally(() => {
modalApi.setState({ loading: false, confirmLoading: false });
});
}
});
await formApi.validateAndSubmitForm();
},
onOpenChange(isOpen: boolean) {
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
if (isOpen) {
const { values, update } = modalApi.getData<Record<string, any>>();
if (values) {
isUpdate.value = update;
formApi.setValues(values);
}
}
},
});
</script>
<template>
<Modal :title="`${isUpdate === true ? '编辑' : '新增'}模板名称`" class="w-[30%]">
<Form />
</Modal>
</template>

28
app/template/view/config/form.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { VbenFormProps } from '#/adapter/form';
export const modalFormProps: VbenFormProps = {
wrapperClass: 'grid-cols-12', // 24栅格,
commonConfig: {
formItemClass: 'col-span-12',
// 所有表单项
componentProps: {
class: 'w-full',
},
},
// handleSubmit: onSubmit,
layout: 'horizontal',
schema: [
{
component: 'VbenInput',
fieldName: 'id',
label: 'ID',
formItemClass: 'col-span-6',
dependencies: {
show: false,
triggerFields: ['id'],
},
},
// 生成的表单字段
],
showDefaultActions: false,
};

20
app/template/view/config/search.ts Normal file
View File

@@ -0,0 +1,20 @@
import type { VbenFormProps } from '#/adapter/form';
// import dayjs from 'dayjs';
export const formOptions: VbenFormProps = {
// 默认展开
collapsed: false,
schema: [
// 生成的搜索字段
],
// 控制表单是否显示折叠按钮
showCollapseButton: true,
submitButtonOptions: {
content: '查询',
},
// 是否在字段值改变时提交表单
submitOnChange: true,
// 按下回车时是否提交表单
submitOnEnter: false,
};

66
app/template/view/config/table.ts Normal file
View File

@@ -0,0 +1,66 @@
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getupperCamelCaseList } from '../api';
interface RowType {
id: string;
name: string;
logo: string;
introduce: string;
created_at: string;
}
export const gridOptions: VxeGridProps<RowType> = {
checkboxConfig: {
highlight: true,
labelField: '',
},
columnConfig: {
useKey: true,
},
rowConfig: {
useKey: true,
},
columns: [
{ type: 'checkbox', width: 60 },
{ field: 'id', align: 'left', title: 'ID', width: 100 },
// 生成的列表字段
{ field: 'created_at', title: '创建时间' },
{ field: 'updated_at', title: '编辑时间' },
{ type: 'html', title: '操作', slots: { default: 'action' } },
],
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
// 请求后端接口方法
query: async ({ page }, formValues) => {
return await getupperCamelCaseList({
page: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
height: 'auto',
border: false,
toolbarConfig: {
// 是否显示搜索表单控制按钮
// @ts-ignore 正式环境时有完整的类型声明
search: true,
refresh: true, // 刷新
print: false, // 打印
export: false, // 导出
// custom: true, // 自定义列
zoom: true, // 最大化最小化
slots: {
buttons: 'toolbar-buttons',
},
custom: {
// 自定义列-图标
icon: 'vxe-icon-menu',
},
},
showOverflow: false,
};

143
app/template/view/index.vue Normal file
View File

@@ -0,0 +1,143 @@
<script lang="ts" setup>
// 导入 VxeGridListeners 类型用于定义表格事件监听器
import type { VxeGridListeners } from '#/adapter/vxe-table';
// 导入 Vue 的 ref 函数用于创建响应式数据
import { ref } from 'vue';
// 导入 Vben 的公共 UI 组件和 Hook
import { Page, useVbenModal } from '@vben/common-ui';
// 导入 Ant Design Vue 的组件和消息提示函数
import { Button, message } from 'ant-design-vue';
// 导入自定义的 VxeGrid Hook 和 TableAction 组件
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';
// 导入删除 API 函数和模态框组件
import { deleteupperCamelCase } from './api';
import upperCamelCase from './components/modal.vue';
// 导入搜索表单和表格配置
import { formOptions } from './config/search';
import { gridOptions } from './config/table';
// 定义是否显示顶部表格下拉操作的响应式数据
const hasTopTableDropDownActions = ref(false);
// 定义表格事件监听器
const gridEvents: VxeGridListeners<any> = {
// 监听表格复选框变化事件
checkboxChange() {
const records = gridApi.grid.getCheckboxRecords();
hasTopTableDropDownActions.value = records.length > 0;
},
// 监听表格全选复选框变化事件
checkboxAll() {
const records = gridApi.grid.getCheckboxRecords();
hasTopTableDropDownActions.value = records.length > 0;
},
};
// 使用自定义的 VxeGrid Hook
const [Grid, gridApi] = useVbenVxeGrid({
formOptions,
gridOptions,
gridEvents,
});
// 使用 Vben 的 Modal Hook
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: upperCamelCase,
});
// 定义显示模态框的函数
const showModal = (data = {}, isUpdate = false) => {
formModalApi.setData({
values: data,
update: isUpdate,
gridApi,
});
formModalApi.open();
};
// 定义删除操作的 API 函数
const deleteApi = (row: any) => {
let ids = [];
if (row) {
ids.push(row);
} else {
ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
}
deleteupperCamelCase({ ids }).then(() => {
message.success('删除成功!');
gridApi.reload();
});
};
</script>
<template>
<!-- 使用 Page 组件包裹整个页面 -->
<Page auto-content-height title="模板名称管理">
<!-- 渲染表单模态框 -->
<FormModal />
<!-- 渲染表格 -->
<Grid>
<!-- 定义表格工具栏按钮 -->
<template #toolbar-buttons>
<TableAction
:actions="[
{
label: '新增',
type: 'primary',
icon: 'ant-design:plus-outlined',
onClick: showModal.bind(null),
},
]"
:drop-down-actions="[
{
label: '删除',
icon: 'ant-design:delete-outlined',
ifShow: hasTopTableDropDownActions,
popConfirm: {
title: '确定删除吗？',
confirm: deleteApi.bind(null, false),
},
},
]"
>
<template #more>
<Button style="margin-left: 16px">
批量操作
</Button>
</template>
</TableAction>
</template>
<!-- 定义操作列的自定义模板 -->
<template #action="{ row }">
<TableAction
:actions="[
{
label: '编辑',
type: 'link',
icon: 'uil:edit',
size: 'small',
onClick: showModal.bind(null, row, true),
},
{
label: '删除',
type: 'link',
icon: 'ant-design:delete-outlined',
size: 'small',
popConfirm: {
title: '确定删除吗？',
confirm: deleteApi.bind(null, row.id),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

2
routes/api.php
View File

@@ -17,7 +17,7 @@ Route::get('/', function () {
*/
UtilsService::class::getInstance()->autoRouteRegister([
'' => \App\Http\Controllers\Api\LoginController::class, // 登录控制器
'code' => \App\Http\Controllers\core\codeGenerationController::class, // 代码生成控制器
'code' => \App\Http\Controllers\core\CodeGenerationController::class, // 代码生成控制器
// 不需要登录的路由生成地址
]);