mirroring/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2024-11-01 06:02:38 +08:00
Code Issues Projects Releases Wiki Activity

优化快速创建菜单功能

Browse Source
This commit is contained in:
icssoa 2022-04-08 13:19:55 +08:00
parent d79a771fd2
commit a1fc571dcd
9 changed files with 152 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/crud.code-snippets vendored
View File

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

99
build/cool/lib/menu/index.ts
View File

@ -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">
<el-row type="flex" align="middle">
<!-- 刷新按钮 -->
<cl-refresh-btn />
${permission.add ? "<!-- 新增按钮 -->\n<cl-add-btn />" : ""}
${permission.del ? "<!-- 删除按钮 -->\n<cl-multi-delete-btn />" : ""}
<cl-flex1 />
<!-- 关键字搜索 -->
<cl-search-key />
</el-row>
<cl-crud ref="Crud">
<el-row>
<!-- 刷新按钮 -->
<cl-refresh-btn />
${permission.add ? "<!-- 新增按钮 -->\n<cl-add-btn />" : ""}
${permission.del ? "<!-- 删除按钮 -->\n<cl-multi-delete-btn />" : ""}
<cl-flex1 />
<!-- 关键字搜索 -->
<cl-search-key />
</el-row>
<el-row>
<!-- 数据表格 -->
<cl-table :ref="setRefs('table')" v-bind="table" />
</el-row>
<el-row>
<!-- 数据表格 -->
<cl-table ref="Table" />
</el-row>
<el-row type="flex">
<cl-flex1 />
<!-- 分页控件 -->
<cl-pagination />
</el-row>
<el-row>
<cl-flex1 />
<!-- 分页控件 -->
<cl-pagination />
</el-row>
${
permission.update
? '<!-- 新增、编辑 -->\n<cl-upsert :ref="setRefs(\'upsert\')" v-bind="upsert" />'
: ""
}
</cl-crud>
<!-- 新增、编辑 -->
<cl-upsert ref="Upsert" />
</cl-crud>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import { CrudLoad, Table${permission.upsert ? ", Upsert" : ""} } from "@cool-vue/crud/types";
<script lang="ts" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
export default defineComponent({
${getPageName(router)}
const { service, named } = useCool();
setup() {
const { refs, setRefs, service } = useCool();
named("${getPageName(router)}");
${
permission.upsert
? "// 新增、编辑配置\nconst upsert = reactive<Upsert>(" +
JSON.stringify(upsert) +
");"
: ""
}
// cl-upsert 配置
const Upsert = useUpsert(${JSON.stringify(upsert)});
// cl-table 配置
const table = reactive<Table>(${JSON.stringify(table)});
// cl-table 配置
const Table = useTable(${JSON.stringify(table)});
// crud 加载
function onLoad({ ctx, app }: CrudLoad) {
// 绑定 service
ctx.service(${service}).done();
app.refresh();
}
return {
refs,
setRefs,${permission.upsert ? "upsert," : ""}
table,
onLoad
};
}
});
// cl-crud 配置
const Crud = useCrud(
{
service: ${service}
},
(app) => {
app.refresh();
}
);
</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);

8
build/cool/lib/modules/index.ts
View File

@ -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) {}
return "";
} catch (e) {
return Promise.reject(e);
}
}

2
package.json
View File

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

3
src/modules/base/views/components/menu-check.vue
View File

@ -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>

19
src/modules/base/views/components/menu-create.vue
View File

@ -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: {
text: "模块名称",
tip: "菜单文件存放在所选模块的 views 目录下",
icon: "el-icon-question"
},
label: "模块名称",
span: 9,
component: {
name: "el-select",
@ -76,11 +73,7 @@ export default defineComponent({
},
{
prop: "entity",
label: {
text: "数据结构",
tip: "所选实体会通过规则配置自动转换",
icon: "el-icon-question"
},
label: "数据结构",
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,

137
src/modules/demo/utils/service.ts
View File

@ -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();
}
};

36
src/modules/demo/views/crud.vue
View File

@ -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",
prop: "maxTradePrice"
label: "状态",
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>

82
src/modules/demo/views/goods.vue Normal file
View File

@ -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>