优化快速创建菜单功能

.vscode/crud.code-snippets

@@ -1,6 +1,6 @@
 {
 	"cl-crud": {
-		"prefix": "cl-crud-ts",
+		"prefix": "cl-crud",
 		"body": [
 			"<template>",
 			"    <cl-crud ref=\"Crud\">",

build/cool/lib/menu/index.ts

@@ -172,7 +172,7 @@ function getPageName(router: string) {
 		router = router.substr(1, router.length);
 	}
 
-	return router ? `name: "${router.replace("/", "-")}",` : "";
+	return router ? router.replace("/", "-") : "";
 }
 
 // 时间合并
@@ -283,73 +283,56 @@ export async function createMenu({ router, columns, prefix, api, module, filenam
 
 	// 代码模板
 	const temp = `<template>
-    <cl-crud :ref="setRefs('crud')" @load="onLoad">
+	<cl-crud ref="Crud">
-        <el-row type="flex" align="middle">
+		<el-row>
-            <!-- 刷新按钮 -->
+			<!-- 刷新按钮 -->
-            <cl-refresh-btn />
+			<cl-refresh-btn />
-            ${permission.add ? "<!-- 新增按钮 -->\n<cl-add-btn />" : ""}
+			${permission.add ? "<!-- 新增按钮 -->\n<cl-add-btn />" : ""}
-            ${permission.del ? "<!-- 删除按钮 -->\n<cl-multi-delete-btn />" : ""}
+			${permission.del ? "<!-- 删除按钮 -->\n<cl-multi-delete-btn />" : ""}
-            <cl-flex1 />
+			<cl-flex1 />
-            <!-- 关键字搜索 -->
+			<!-- 关键字搜索 -->
-            <cl-search-key />
+			<cl-search-key />
-        </el-row>
+		</el-row>
 
-        <el-row>
+		<el-row>
-            <!-- 数据表格 -->
+			<!-- 数据表格 -->
-            <cl-table :ref="setRefs('table')" v-bind="table" />
+			<cl-table ref="Table" />
-        </el-row>
+		</el-row>
 
-        <el-row type="flex">
+		<el-row>
-            <cl-flex1 />
+			<cl-flex1 />
-            <!-- 分页控件 -->
+			<!-- 分页控件 -->
-            <cl-pagination />
+			<cl-pagination />
-        </el-row>
+		</el-row>
 
-        ${
+		<!-- 新增、编辑 -->
-			permission.update
+		<cl-upsert ref="Upsert" />
-				? '<!-- 新增、编辑 -->\n<cl-upsert :ref="setRefs(\'upsert\')" v-bind="upsert" />'
+	</cl-crud>
-				: ""
-		}
-    </cl-crud>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive } from "vue";
+import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
-import { CrudLoad, Table${permission.upsert ? ", Upsert" : ""} } from "@cool-vue/crud/types";
 import { useCool } from "/@/cool";
 
-export default defineComponent({
+const { service, named } = useCool();
-	${getPageName(router)}
 
-    setup() {
+named("${getPageName(router)}");
-        const { refs, setRefs, service } = useCool();
 
-        ${
+// cl-upsert 配置
-			permission.upsert
+const Upsert = useUpsert(${JSON.stringify(upsert)});
-				? "// 新增、编辑配置\nconst upsert = reactive<Upsert>(" +
-				  JSON.stringify(upsert) +
-				  ");"
-				: ""
-		}
 
-        // cl-table 配置
+// cl-table 配置
-        const table = reactive<Table>(${JSON.stringify(table)});
+const Table = useTable(${JSON.stringify(table)});
 
-        // crud 加载
+// cl-crud 配置
-        function onLoad({ ctx, app }: CrudLoad) {
+const Crud = useCrud(
-            // 绑定 service
+	{
-            ctx.service(${service}).done();
+		service: ${service}
-            app.refresh();
+	},
-        }
+	(app) => {
-
+		app.refresh();
-        return {
+	}
-            refs,
+);
-            setRefs,${permission.upsert ? "upsert," : ""}
-            table,
-            onLoad
-        };
-    }
-});
 </script>`;
 
 	const content = prettier.format(temp, {
@@ -365,7 +348,7 @@ export default defineComponent({
 	});
 
 	// views 目录是否存在
-	const dir = join(__dirname, `../../src/modules/${module}/views`);
+	const dir = join(__dirname, `../../../../src/modules/${module}/views`);
 
 	// 创建目录
 	createDir(dir);

build/cool/lib/modules/index.ts

@@ -3,9 +3,9 @@ import { join } from "path";
 
 export function getModules() {
 	try {
-		const dirs = fs.readdirSync(join(__dirname, "../../src/modules"));
+		const dirs = fs.readdirSync(join(__dirname, "../../../../src/modules"));
 		return Promise.resolve(dirs.filter((e) => !e.includes(".")));
-	} catch (e) {}
+	} catch (e) {
-
+		return Promise.reject(e);
-	return "";
+	}
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "5.0.2",
+	"version": "5.0.3",
 	"scripts": {
 		"dev": "vite --host",
 		"build": "vite build",

src/modules/base/views/components/menu-check.vue

@@ -1,10 +1,11 @@
 <template>
 	<div class="menu-check__wrap">
 		<el-popover
-			v-model="visible"
+			v-model:visible="visible"
 			placement="bottom-start"
 			width="660px"
 			popper-class="menu-check"
+			trigger="click"
 		>
 			<el-input v-model="keyword" :prefix-icon="Search"> </el-input>
 

src/modules/base/views/components/menu-create.vue

@@ -10,6 +10,7 @@ import { ElMessage } from "element-plus";
 import { useCool } from "/@/cool";
 import { useForm } from "@cool-vue/crud";
 import MenuCheck from "./menu-check.vue";
+import IconCheck from "./icon-check.vue";
 
 export default defineComponent({
 	name: "menu-create",
@@ -24,7 +25,7 @@ export default defineComponent({
 		async function create() {
 			// 模块列表
 			const modules = await service.request({
-				url: "/__cool_modules"
+				url: `http://localhost:${__SERVER_PORT__}/__cool_modules`
 			});
 
 			// 数据结构列表
@@ -53,11 +54,7 @@ export default defineComponent({
 				items: [
 					{
 						prop: "module",
-						label: {
+						label: "模块名称",
-							text: "模块名称",
-							tip: "菜单文件存放在所选模块的 views 目录下",
-							icon: "el-icon-question"
-						},
 						span: 9,
 						component: {
 							name: "el-select",
@@ -76,11 +73,7 @@ export default defineComponent({
 					},
 					{
 						prop: "entity",
-						label: {
+						label: "数据结构",
-							text: "数据结构",
-							tip: "所选实体会通过规则配置自动转换",
-							icon: "el-icon-question"
-						},
 						span: 15,
 						component: {
 							name: "el-select",
@@ -153,7 +146,7 @@ export default defineComponent({
 						prop: "icon",
 						label: "菜单图标",
 						component: {
-							name: "cl-menu-icons"
+							vm: IconCheck
 						}
 					},
 					{
@@ -218,7 +211,7 @@ export default defineComponent({
 									close();
 
 									service.request({
-										url: "/__cool_createMenu",
+										url: `http://localhost:${__SERVER_PORT__}/__cool_createMenu`,
 										method: "POST",
 										data: {
 											...item,

src/modules/demo/utils/service.ts

@@ -1,137 +0,0 @@
-import dayjs from "dayjs";
-
-let id = 10;
-
-export const UserList = [
-	{
-		id: 1,
-		name: "a",
-		createTime: "2019-09-02 12:00:00",
-		price: 75.99,
-		status: 1,
-		hook: "1,2"
-	},
-	{
-		id: 2,
-		name: "a",
-		createTime: "2019-09-05",
-		price: 242.1,
-		status: 1
-	},
-	{
-		id: 3,
-		name: "b",
-		createTime: "2019-09-12",
-		price: 74.11,
-		status: 0
-	},
-	{
-		id: 4,
-		name: "b",
-		createTime: "2019-09-13",
-		price: 276.64,
-		status: 1
-	},
-	{
-		id: 5,
-		name: "c",
-		createTime: "2019-09-18",
-		price: 160.23,
-		status: 0
-	},
-	{
-		id: 6,
-		name: "d",
-		createTime: "2019-09-18",
-		price: 160.23,
-		status: 0
-	},
-	{
-		id: 7,
-		name: "d",
-		createTime: "2019-09-18",
-		price: 160.23,
-		status: 0
-	},
-	{
-		id: 8,
-		name: "d",
-		createTime: "2019-09-18",
-		price: 160.23,
-		status: 0
-	},
-	{
-		id: 9,
-		name: "e",
-		createTime: "2019-09-18",
-		price: 160.23,
-		status: 0
-	}
-];
-
-export const TestService = {
-	page: (p: any) => {
-		console.log("GET[page]", p);
-
-		let total = 0;
-
-		const list = UserList.filter((e, i) => {
-			if (p.name) {
-				return e.name.includes(p.name);
-			}
-
-			if (![undefined, null, ""].includes(p.status)) {
-				return e.status === p.status;
-			}
-
-			total++;
-
-			if (i >= (p.page - 1) * p.size && i < p.page * p.size) {
-				return true;
-			} else {
-				return false;
-			}
-		});
-
-		return Promise.resolve({
-			list,
-			pagination: {
-				page: p.page,
-				size: p.size,
-				total
-			}
-		});
-	},
-	info: (d: any) => {
-		console.log("GET[info]", d);
-		return new Promise((resolve) => {
-			setTimeout(() => {
-				resolve(UserList.find((e) => e.id == d.id));
-			}, 500);
-		});
-	},
-	add: (d: any) => {
-		console.log("POST[add]", d);
-		UserList.push({
-			...d,
-			id: id++,
-			createTime: dayjs().format("YYYY-MM-DD日")
-		});
-		return Promise.resolve();
-	},
-	delete: (d: any) => {
-		console.log("POST[delete]", d);
-		const ids = d.ids.split(",");
-		ids.forEach((id: any) => {
-			const index = UserList.findIndex((e) => e.id == id);
-			UserList.splice(index, 1);
-		});
-		return Promise.resolve();
-	},
-	update: (d: any) => {
-		console.log("POST[update]", d);
-		const item = UserList.find((e) => e.id == d.id);
-		Object.assign(item, d);
-		return Promise.resolve();
-	}
-};

src/modules/demo/views/crud.vue

@@ -56,11 +56,10 @@ export default {
 
 <script lang="tsx" setup>
 import { useCrud, useUpsert, useTable, useForm, useAdvSearch } from "@cool-vue/crud";
-import { TestService } from "../utils/service";
 
 const Crud = useCrud(
 	{
-		service: TestService
+		service: "test"
 	},
 	(app) => {
 		app.refresh();
@@ -131,11 +130,21 @@ const Table = useTable({
 		},
 		{
 			label: "姓名",
-			prop: "brandName"
+			prop: "name"
 		},
 		{
-			label: "price",
+			label: "状态",
-			prop: "maxTradePrice"
+			prop: "status",
+			dict: [
+				{
+					label: "开启",
+					value: 1
+				},
+				{
+					label: "关闭",
+					value: 0
+				}
+			]
 		},
 		{
 			type: "op",
@@ -170,7 +179,7 @@ const filter = {
 // 内嵌
 const Crud2 = useCrud(
 	{
-		service: TestService
+		service: "test"
 	},
 	(app) => {
 		app.refresh();
@@ -253,18 +262,3 @@ function openForm() {
 	});
 }
 </script>
-
-<style lang="scss">
-* {
-	padding: 0;
-	margin: 0;
-}
-
-#app {
-	height: 100vh;
-
-	.demo {
-		height: 100%;
-	}
-}
-</style>

src/modules/demo/views/goods.vue

@@ -0,0 +1,82 @@
+<template>
+	<cl-crud ref="Crud">
+		<el-row>
+			<!-- 刷新按钮 -->
+			<cl-refresh-btn />
+			<!-- 新增按钮 -->
+			<cl-add-btn />
+			<!-- 删除按钮 -->
+			<cl-multi-delete-btn />
+			<cl-flex1 />
+			<!-- 关键字搜索 -->
+			<cl-search-key />
+		</el-row>
+
+		<el-row>
+			<!-- 数据表格 -->
+			<cl-table ref="Table" />
+		</el-row>
+
+		<el-row>
+			<cl-flex1 />
+			<!-- 分页控件 -->
+			<cl-pagination />
+		</el-row>
+
+		<!-- 新增、编辑 -->
+		<cl-upsert ref="Upsert" />
+	</cl-crud>
+</template>
+
+<script lang="ts" setup>
+import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
+import { useCool } from "/@/cool";
+
+const { service, named } = useCool();
+
+named("demo-goods");
+
+// cl-upsert 配置
+const Upsert = useUpsert({
+	items: [
+		{ label: "标题", prop: "title", required: true, component: { name: "el-input" } },
+		{ label: "图片", prop: "pic", component: { name: "cl-upload" }, required: true },
+		{
+			label: "价格",
+			prop: "price",
+			component: { name: "el-input-number", props: { min: 0 } },
+			required: true
+		},
+		{
+			label: "分类",
+			prop: "type",
+			component: { name: "el-radio-group", options: [] }
+		}
+	]
+});
+
+// cl-table 配置
+const Table = useTable({
+	columns: [
+		{ type: "selection" },
+		{ label: "ID", prop: "id" },
+		{ label: "标题", prop: "title" },
+		{ label: "图片", prop: "pic", component: { name: "cl-image", props: { size: 60 } } },
+		{ label: "价格", prop: "price" },
+		{ label: "分类", prop: "type", dict: [] },
+		{ label: "创建时间", prop: "createTime" },
+		{ label: "更新时间", prop: "updateTime" },
+		{ type: "op", buttons: ["edit", "delete"] }
+	]
+});
+
+// cl-crud 配置
+const Crud = useCrud(
+	{
+		service: service.demo.goods
+	},
+	(app) => {
+		app.refresh();
+	}
+);
+</script>