github/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2025-12-12 13:42:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
icssoa 2024-01-14 22:25:40 +08:00
parent d28ddd9c16
commit 06923e8990
21 changed files with 131 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -9,7 +9,7 @@
"lint:eslint": "eslint \"./src/**/*.{vue,ts,tsx}\" --fix" "lint:eslint": "eslint \"./src/**/*.{vue,ts,tsx}\" --fix"
}, },
"dependencies": { "dependencies": {
"@cool-vue/crud": "^7.0.11", "@cool-vue/crud": "^7.1.0",
"@element-plus/icons-vue": "^2.1.0", "@element-plus/icons-vue": "^2.1.0",
"@vueuse/core": "^10.4.0", "@vueuse/core": "^10.4.0",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "^5.1.23",

45
packages/crud/index.d.ts vendored
View File

@ -10,7 +10,7 @@ declare namespace Vue {
// element-plus // element-plus
declare namespace ElementPlus { declare namespace ElementPlus {
type Size = "large" | "default" | "small"; type Size = "large" | "default" | "small";
type Align = "large" | "default" | "small"; type Align = "left" | "center" | "right";
interface FormProps { interface FormProps {
inline?: boolean; inline?: boolean;
@ -40,8 +40,8 @@ declare type obj = {
declare type DeepPartial<T> = T extends Function declare type DeepPartial<T> = T extends Function
? T ? T
: T extends object : T extends object
? { [P in keyof T]?: DeepPartial<T[P]> } ? { [P in keyof T]?: DeepPartial<T[P]> }
: T; : T;
// 合并 // 合并
declare type Merge<A, B> = Omit<A, keyof B> & B; declare type Merge<A, B> = Omit<A, keyof B> & B;
@ -143,7 +143,8 @@ declare namespace Render {
} }
} }
declare type PropKey<T> = Extract<keyof Required<T>, string>; // 获取keys
type PropKey<T> = keyof RemoveIndex<T> | (string & {});
declare namespace ClCrud { declare namespace ClCrud {
interface Label { interface Label {
@ -290,10 +291,6 @@ declare namespace ClCrud {
): void; ): void;
} }
interface Options extends Config {
service: any;
}
interface Ref { interface Ref {
"cl-table": ClTable.Ref; "cl-table": ClTable.Ref;
"cl-upsert": ClUpsert.Ref; "cl-upsert": ClUpsert.Ref;
@ -320,6 +317,10 @@ declare namespace ClCrud {
refresh: Service["api"]["page"]; refresh: Service["api"]["page"];
[key: string]: any; [key: string]: any;
} }
interface Options extends DeepPartial<Config> {
service?: any;
}
} }
declare namespace ClTable { declare namespace ClTable {
@ -340,7 +341,7 @@ declare namespace ClTable {
dictSeparator: string; dictSeparator: string;
dictAllLevels: boolean; dictAllLevels: boolean;
buttons: OpButton | ((options: { scope: T }) => OpButton); buttons: OpButton | ((options: { scope: T }) => OpButton);
align: "left" | "center" | "right"; align: ElementPlus.Align;
label: any; label: any;
className: string; className: string;
prop: PropKey<T>; prop: PropKey<T>;
@ -353,7 +354,7 @@ declare namespace ClTable {
sortBy: string | ((row: T, index: number) => any) | any[]; sortBy: string | ((row: T, index: number) => any) | any[];
resizable: boolean; resizable: boolean;
columnKey: string; columnKey: string;
headerAlign: string; headerAlign: ElementPlus.Align;
showOverflowTooltip: boolean; showOverflowTooltip: boolean;
fixed: boolean | string; fixed: boolean | string;
formatter: (row: T, column: any, value: any, index: number) => any; formatter: (row: T, column: any, value: any, index: number) => any;
@ -506,7 +507,7 @@ declare namespace ClForm {
label?: string; label?: string;
renderLabel?: any; renderLabel?: any;
flex?: boolean; flex?: boolean;
hidden?: boolean | Vue.Ref<boolean> | ((options: { scope: obj }) => boolean); hidden?: (options: { scope: obj }) => boolean;
prepend?: Render.Component; prepend?: Render.Component;
component?: Render.Component; component?: Render.Component;
append?: Render.Component; append?: Render.Component;
@ -516,7 +517,7 @@ declare namespace ClForm {
[key: string]: any; [key: string]: any;
} }
interface Config { interface Config<T = any> {
title?: any; title?: any;
height?: string; height?: string;
width?: string; width?: string;
@ -525,9 +526,9 @@ declare namespace ClForm {
form: obj; form: obj;
isReset?: boolean; isReset?: boolean;
on?: { on?: {
open?(data: obj): void; open?(data: T): void;
close?(action: CloseAction, done: fn): void; close?(action: CloseAction, done: fn): void;
submit?(data: obj, event: { close: fn; done: fn }): void; submit?(data: T, event: { close: fn; done: fn }): void;
}; };
op: { op: {
hidden?: boolean; hidden?: boolean;
@ -600,7 +601,7 @@ declare namespace ClForm {
} }
declare namespace ClUpsert { declare namespace ClUpsert {
interface Config<T = obj> { interface Config<T = any> {
sync: boolean; sync: boolean;
items: ClForm.Item[]; items: ClForm.Item[];
props: ClForm.Config["props"]; props: ClForm.Config["props"];
@ -625,11 +626,15 @@ declare namespace ClUpsert {
mode: "add" | "update" | "info"; mode: "add" | "update" | "info";
} }
interface Options<T = any> extends DeepPartial<Config<T>> { interface Options<T> extends DeepPartial<Config> {
items?: ClForm.Items<T>; items?: ClForm.Items<T>;
} }
} }
interface UpsertOptions {
items: ClForm.Items;
}
declare namespace ClAdvSearch { declare namespace ClAdvSearch {
interface Config<T = any> { interface Config<T = any> {
items?: ClForm.Item[]; items?: ClForm.Item[];
@ -749,11 +754,3 @@ declare type Options = DeepPartial<Config>;
declare interface CrudOptions { declare interface CrudOptions {
options: Options; options: Options;
} }
interface obj2 {
[prop: string]: any;
}
interface Item2<T = any2> {
prop: keyof T;
}

2
packages/crud/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@cool-vue/crud", "name": "@cool-vue/crud",
"version": "7.0.11", "version": "7.1.0",
"private": false, "private": false,
"main": "./dist/index.umd.min.js", "main": "./dist/index.umd.min.js",
"typings": "types/index.d.ts", "typings": "types/index.d.ts",

54
packages/crud/src/App.vue
View File

@ -1,17 +1,49 @@
<template> <template>
<div>CRUD v7.0.0</div> <div>
<div>CRUD v7.0.0</div>
<cl-crud>
<cl-add-btn />
<cl-upsert ref="Upsert"></cl-upsert>
</cl-crud>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue";
import { useTable, useForm, useSearch, useUpsert, useAdvSearch } from "./hooks"; import { useTable, useForm, useSearch, useUpsert, useAdvSearch } from "./hooks";
// Test // Test
interface Data { interface Data {
name?: string; name?: string;
age?: string; age?: number;
formatter?(): string;
[key: string]: any; [key: string]: any;
} }
type Form = {
data?: Data;
list?: Data[] | (() => any)[];
};
function useF<T>(options: Form): Form {
return options;
}
const form = useF({
list: [
{
name: "A"
},
() => {
return {
name: form.data?.age == 12 ? "A" : "B"
};
}
]
});
const Table = useTable<Data>({ const Table = useTable<Data>({
columns: [ columns: [
{ {
@ -36,14 +68,18 @@ const Upsert = useUpsert<Data>({
items: [ items: [
{ {
label: "xx", label: "xx",
prop: "age" prop: "age",
component: {
name: "el-input"
}
},
() => {
return {
hidden: Upsert.value?.mode == "add",
label: "x"
};
} }
], ]
onOpened(data) {
data.name = "";
},
onInfo(data) {},
onSubmit(data) {}
}); });
const Search = useSearch<Data>({ const Search = useSearch<Data>({

8
packages/crud/src/hooks/crud.ts
View File

@ -52,7 +52,7 @@ function useEvent(names: string[], { r, options, clear }: any) {
} }
// crud // crud
export function useCrud(options?: DeepPartial<ClCrud.Options>, cb?: (app: ClCrud.Ref) => void) { export function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void) {
const Crud = ref<ClCrud.Ref>(); const Crud = ref<ClCrud.Ref>();
useParent("cl-crud", Crud); useParent("cl-crud", Crud);
@ -77,8 +77,8 @@ export function useCrud(options?: DeepPartial<ClCrud.Options>, cb?: (app: ClCrud
} }
// 新增、编辑 // 新增、编辑
export function useUpsert<T>(options?: ClUpsert.Options<T>) { export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref> {
const Upsert = ref<ClUpsert.Ref<T>>(); const Upsert = ref<ClUpsert.Ref>();
useParent("cl-upsert", Upsert); useParent("cl-upsert", Upsert);
if (options) { if (options) {
@ -105,7 +105,7 @@ export function useUpsert<T>(options?: ClUpsert.Options<T>) {
} }
); );
return Upsert; return Upsert as Ref<ClUpsert.Ref<T>>;
} }
// 表格 // 表格

38
packages/crud/src/static/index.scss
View File

@ -282,6 +282,7 @@
&.no-label { &.no-label {
& > .el-form-item__label { & > .el-form-item__label {
padding: 0; padding: 0;
display: none;
} }
} }
} }
@ -328,10 +329,8 @@
} }
} }
&__children { .el-form-item {
.el-form-item { margin-bottom: 18px;
margin-bottom: 18px !important;
}
} }
.el-table__header tr { .el-table__header tr {
@ -359,6 +358,7 @@
height: 35px; height: 35px;
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
position: relative; position: relative;
@ -397,9 +397,7 @@
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
left: 0; left: 0;
transition: transition: transform 0.3s ease-in-out, width 0.2s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transform 0.3s ease-in-out,
width 0.2s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
background-color: var(--el-color-primary); background-color: var(--el-color-primary);
} }
@ -425,39 +423,47 @@
} }
.cl-form-card { .cl-form-card {
margin-top: 0;
&__header { &__header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 14px;
padding: 0 5px; height: 32px;
line-height: normal;
font-weight: bold;
padding: 0 10px;
background-color: var(--el-border-color-extra-light);
border-radius: var(--el-border-radius-base);
cursor: pointer;
&:hover {
.el-icon {
color: var(--el-color-primary);
}
}
} }
&__container { &__container {
border: 1px solid var(--el-border-color);
border-bottom: 0;
border-radius: 0;
transition: all 0.3s; transition: all 0.3s;
display: grid; display: grid;
grid-template-rows: 0fr; grid-template-rows: 0fr;
> .cl-form-item__children { > .cl-form-item__children {
margin: 0 10px;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
.el-row { .el-row {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px;
} }
} }
} }
&.is-expand { &.is-expand {
> .cl-form-card__container { > .cl-form-card__container {
border-bottom: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
grid-template-rows: 1fr; grid-template-rows: 1fr;
margin-bottom: -18px;
} }
} }

1
packages/crud/types/components/adv/search.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference types="../index" />
import { PropType } from "vue"; import { PropType } from "vue";
declare const _default: import("vue").DefineComponent<{ declare const _default: import("vue").DefineComponent<{
items: { items: {

1
packages/crud/types/components/context-menu/index.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference types="../index" />
declare const ClContextMenu: import("vue").DefineComponent<{ declare const ClContextMenu: import("vue").DefineComponent<{
show: BooleanConstructor; show: BooleanConstructor;
options: { options: {

2
packages/crud/types/components/dialog/index.d.ts vendored
View File

@ -61,10 +61,10 @@ declare const _default: import("vue").DefineComponent<{
title: string; title: string;
padding: string; padding: string;
width: string; width: string;
keepAlive: boolean;
hideHeader: boolean; hideHeader: boolean;
controls: unknown[]; controls: unknown[];
fullscreen: boolean; fullscreen: boolean;
keepAlive: boolean;
modelValue: boolean; modelValue: boolean;
}, {}>; }, {}>;
export default _default; export default _default;

6
packages/crud/types/components/form-tabs/index.d.ts vendored
View File

@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<{
default: () => never[]; default: () => never[];
}; };
justify: { justify: {
type: PropType<"center" | "left" | "right" | "justify" | "end" | "start" | "match-parent">; type: PropType<"center" | "justify" | "left" | "right" | "end" | "start" | "match-parent">;
default: string; default: string;
}; };
type: { type: {
@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{
default: () => never[]; default: () => never[];
}; };
justify: { justify: {
type: PropType<"center" | "left" | "right" | "justify" | "end" | "start" | "match-parent">; type: PropType<"center" | "justify" | "left" | "right" | "end" | "start" | "match-parent">;
default: string; default: string;
}; };
type: { type: {
@ -33,6 +33,6 @@ declare const _default: import("vue").DefineComponent<{
}, { }, {
type: "default" | "card"; type: "default" | "card";
labels: unknown[]; labels: unknown[];
justify: "center" | "left" | "right" | "justify" | "end" | "start" | "match-parent"; justify: "center" | "justify" | "left" | "right" | "end" | "start" | "match-parent";
}, {}>; }, {}>;
export default _default; export default _default;

3
packages/crud/types/components/form/helper/index.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference types="../index" />
export declare function useForm(): { export declare function useForm(): {
Form: import("vue").Ref<any>; Form: import("vue").Ref<any>;
config: { config: {
@ -22,7 +23,7 @@ export declare function useForm(): {
items: { items: {
[x: string]: any; [x: string]: any;
type?: "tabs" | undefined; type?: "tabs" | undefined;
prop?: string | undefined; prop?: (string & {}) | undefined;
props?: { props?: {
[x: string]: any; [x: string]: any;
labels?: { labels?: {

1
packages/crud/types/components/form/helper/plugins.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference types="../index" />
import { Ref } from "vue"; import { Ref } from "vue";
export declare function usePlugins({ visible }: { export declare function usePlugins({ visible }: {
visible: Ref<boolean>; visible: Ref<boolean>;

2
packages/crud/types/components/form/index.d.ts vendored
View File

@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<{
inner: BooleanConstructor; inner: BooleanConstructor;
inline: BooleanConstructor; inline: BooleanConstructor;
}>>, { }>>, {
inline: boolean;
inner: boolean; inner: boolean;
inline: boolean;
}, {}>; }, {}>;
export default _default; export default _default;

1
packages/crud/types/components/search/index.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference types="../index" />
import { PropType } from "vue"; import { PropType } from "vue";
declare const _default: import("vue").DefineComponent<{ declare const _default: import("vue").DefineComponent<{
data: { data: {

7
packages/crud/types/components/table/helper/index.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference types="../index" />
export declare function useTable(props: any): { export declare function useTable(props: any): {
Table: import("vue").Ref<any>; Table: import("vue").Ref<any>;
config: { config: {
@ -103,10 +104,10 @@ export declare function useTable(props: any): {
scope: obj; scope: obj;
}) => void; }) => void;
})[]; })[];
align: "center" | "left" | "right"; align: ElementPlus.Align;
label: any; label: any;
className: string; className: string;
prop: string; prop: string & {};
orderNum: number; orderNum: number;
width: number; width: number;
minWidth: string | number; minWidth: string | number;
@ -119,7 +120,7 @@ export declare function useTable(props: any): {
sortBy: string | any[] | ((row: any, index: number) => any); sortBy: string | any[] | ((row: any, index: number) => any);
resizable: boolean; resizable: boolean;
columnKey: string; columnKey: string;
headerAlign: string; headerAlign: ElementPlus.Align;
showOverflowTooltip: boolean; showOverflowTooltip: boolean;
fixed: string | boolean; fixed: string | boolean;
formatter: (row: any, column: any, value: any, index: number) => any; formatter: (row: any, column: any, value: any, index: number) => any;

1
packages/crud/types/components/table/helper/render.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference types="../index" />
export declare function useRender(): { export declare function useRender(): {
renderColumn: (columns: ClTable.Column[]) => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, { renderColumn: (columns: ClTable.Column[]) => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any; [key: string]: any;

4
packages/crud/types/hooks/crud.d.ts vendored
View File

@ -1,7 +1,7 @@
/// <reference types="../index" /> /// <reference types="../index" />
import { Ref } from "vue"; import { Ref } from "vue";
export declare function useCrud(options?: DeepPartial<ClCrud.Options>, cb?: (app: ClCrud.Ref) => void): Ref<ClCrud.Ref | undefined>; export declare function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void): Ref<ClCrud.Ref | undefined>;
export declare function useUpsert<T>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref<T> | undefined>; export declare function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref<T> | undefined>;
export declare function useTable<T = any>(options?: ClTable.Options<T>): Ref<ClTable.Ref<T> | undefined>; export declare function useTable<T = any>(options?: ClTable.Options<T>): Ref<ClTable.Ref<T> | undefined>;
export declare function useForm<T = any>(cb?: (app: ClForm.Ref<T>) => void): Ref<ClForm.Ref<T> | undefined>; export declare function useForm<T = any>(cb?: (app: ClForm.Ref<T>) => void): Ref<ClForm.Ref<T> | undefined>;
export declare function useAdvSearch<T = any>(options?: ClAdvSearch.Options<T>): Ref<ClAdvSearch.Ref<T> | undefined>; export declare function useAdvSearch<T = any>(options?: ClAdvSearch.Options<T>): Ref<ClAdvSearch.Ref<T> | undefined>;

1
packages/crud/types/index.d.ts vendored
View File

@ -1,3 +1,4 @@
/// <reference types="../index" />
import { App } from "vue"; import { App } from "vue";
import "./static/index.scss"; import "./static/index.scss";
declare const Crud: { declare const Crud: {

3
src/config/proxy.ts
View File

@ -1,6 +1,7 @@
export const proxy = { export const proxy = {
"/dev/": { "/dev/": {
target: "http://127.0.0.1:8001", target: "https://test-admin.cool-js.cloud",
// target: "http://127.0.0.1:8001",
changeOrigin: true, changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/dev/, "") rewrite: (path: string) => path.replace(/^\/dev/, "")
}, },

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

@ -197,17 +197,19 @@ const Upsert = useUpsert({
}, },
// 动态配置，新增显示、编辑隐藏 // 动态配置，新增显示、编辑隐藏
() => { () => {
return { return () => {
label: "密码", return {
group: "base", label: "密码",
prop: "password", group: "base",
hidden: Upsert.value?.mode == "update", // 通过 mode 参数判断 prop: "password",
component: { hidden: Upsert.value?.mode == "update", // 通过 mode 参数判断
name: "el-input", component: {
props: { name: "el-input",
type: "password" props: {
type: "password"
}
} }
} };
}; };
}, },
{ {

8
yarn.lock
View File

@ -344,10 +344,10 @@
"@babel/helper-validator-identifier" "^7.22.20" "@babel/helper-validator-identifier" "^7.22.20"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@cool-vue/crud@^7.0.11": "@cool-vue/crud@^7.1.0":
version "7.0.11" version "7.1.0"
resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.11.tgz#69b2d5a361dc162d342bd73ca286921725169c80" resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-7.1.0.tgz#bed31f8059f55fba9dafa03b028216ac52685fe6"
integrity sha512-ROf42Odza3hjzpvRTOXi0ovC9YKYbR6rd0uRjyh0fbb0jX/a2CActyOEly28J2O+Mo8Mm8EsvrDRy1O1mmwaAg== integrity sha512-ai3QIim55AuWGSpRqgYU4b7vppfqFx4V7vP1htDIwhdY9oMGRiyzedjE1yvwuvHE7E9By9zuMfO5D8AuB9lXbQ==
dependencies: dependencies:
array.prototype.flat "^1.2.4" array.prototype.flat "^1.2.4"
core-js "^3.21.1" core-js "^3.21.1"