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"
},
"dependencies": {
"@cool-vue/crud": "^7.0.11",
"@cool-vue/crud": "^7.1.0",
"@element-plus/icons-vue": "^2.1.0",
"@vueuse/core": "^10.4.0",
"@wangeditor/editor": "^5.1.23",

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

@ -10,7 +10,7 @@ declare namespace Vue {
// element-plus
declare namespace ElementPlus {
type Size = "large" | "default" | "small";
type Align = "large" | "default" | "small";
type Align = "left" | "center" | "right";
interface FormProps {
inline?: boolean;
@ -40,8 +40,8 @@ declare type obj = {
declare type DeepPartial<T> = T extends Function
? T
: T extends object
? { [P in keyof T]?: DeepPartial<T[P]> }
: T;
? { [P in keyof T]?: DeepPartial<T[P]> }
: T;
// 合并
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 {
interface Label {
@ -290,10 +291,6 @@ declare namespace ClCrud {
): void;
}
interface Options extends Config {
service: any;
}
interface Ref {
"cl-table": ClTable.Ref;
"cl-upsert": ClUpsert.Ref;
@ -320,6 +317,10 @@ declare namespace ClCrud {
refresh: Service["api"]["page"];
[key: string]: any;
}
interface Options extends DeepPartial<Config> {
service?: any;
}
}
declare namespace ClTable {
@ -340,7 +341,7 @@ declare namespace ClTable {
dictSeparator: string;
dictAllLevels: boolean;
buttons: OpButton | ((options: { scope: T }) => OpButton);
align: "left" | "center" | "right";
align: ElementPlus.Align;
label: any;
className: string;
prop: PropKey<T>;
@ -353,7 +354,7 @@ declare namespace ClTable {
sortBy: string | ((row: T, index: number) => any) | any[];
resizable: boolean;
columnKey: string;
headerAlign: string;
headerAlign: ElementPlus.Align;
showOverflowTooltip: boolean;
fixed: boolean | string;
formatter: (row: T, column: any, value: any, index: number) => any;
@ -506,7 +507,7 @@ declare namespace ClForm {
label?: string;
renderLabel?: any;
flex?: boolean;
hidden?: boolean | Vue.Ref<boolean> | ((options: { scope: obj }) => boolean);
hidden?: (options: { scope: obj }) => boolean;
prepend?: Render.Component;
component?: Render.Component;
append?: Render.Component;
@ -516,7 +517,7 @@ declare namespace ClForm {
[key: string]: any;
}
interface Config {
interface Config<T = any> {
title?: any;
height?: string;
width?: string;
@ -525,9 +526,9 @@ declare namespace ClForm {
form: obj;
isReset?: boolean;
on?: {
open?(data: obj): void;
open?(data: T): 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: {
hidden?: boolean;
@ -600,7 +601,7 @@ declare namespace ClForm {
}
declare namespace ClUpsert {
interface Config<T = obj> {
interface Config<T = any> {
sync: boolean;
items: ClForm.Item[];
props: ClForm.Config["props"];
@ -625,11 +626,15 @@ declare namespace ClUpsert {
mode: "add" | "update" | "info";
}
interface Options<T = any> extends DeepPartial<Config<T>> {
interface Options<T> extends DeepPartial<Config> {
items?: ClForm.Items<T>;
}
}
interface UpsertOptions {
items: ClForm.Items;
}
declare namespace ClAdvSearch {
interface Config<T = any> {
items?: ClForm.Item[];
@ -749,11 +754,3 @@ declare type Options = DeepPartial<Config>;
declare interface CrudOptions {
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",
"version": "7.0.11",
"version": "7.1.0",
"private": false,
"main": "./dist/index.umd.min.js",
"typings": "types/index.d.ts",

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

@ -1,17 +1,49 @@
<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>
<script setup lang="ts">
import { ref } from "vue";
import { useTable, useForm, useSearch, useUpsert, useAdvSearch } from "./hooks";
// Test
interface Data {
name?: string;
age?: string;
age?: number;
formatter?(): string;
[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>({
columns: [
{
@ -36,14 +68,18 @@ const Upsert = useUpsert<Data>({
items: [
{
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>({

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

@ -52,7 +52,7 @@ function useEvent(names: string[], { r, options, clear }: any) {
}
// 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>();
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>) {
const Upsert = ref<ClUpsert.Ref<T>>();
export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref> {
const Upsert = ref<ClUpsert.Ref>();
useParent("cl-upsert", Upsert);
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 {
& > .el-form-item__label {
padding: 0;
display: none;
}
}
}
@ -328,10 +329,8 @@
}
}
&__children {
.el-form-item {
margin-bottom: 18px !important;
}
.el-form-item {
margin-bottom: 18px;
}
.el-table__header tr {
@ -359,6 +358,7 @@
height: 35px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
position: relative;
@ -397,9 +397,7 @@
position: absolute;
bottom: -1px;
left: 0;
transition:
transform 0.3s ease-in-out,
width 0.2s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 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);
}
@ -425,39 +423,47 @@
}
.cl-form-card {
margin-top: 0;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 15px;
padding: 0 5px;
font-size: 14px;
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 {
border: 1px solid var(--el-border-color);
border-bottom: 0;
border-radius: 0;
transition: all 0.3s;
display: grid;
grid-template-rows: 0fr;
> .cl-form-item__children {
margin: 0 10px;
min-height: 0;
overflow: hidden;
.el-row {
margin-top: 10px;
margin-bottom: 10px;
}
}
}
&.is-expand {
> .cl-form-card__container {
border-bottom: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
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";
declare const _default: import("vue").DefineComponent<{
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<{
show: BooleanConstructor;
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;
padding: string;
width: string;
keepAlive: boolean;
hideHeader: boolean;
controls: unknown[];
fullscreen: boolean;
keepAlive: boolean;
modelValue: boolean;
}, {}>;
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[];
};
justify: {
type: PropType<"center" | "left" | "right" | "justify" | "end" | "start" | "match-parent">;
type: PropType<"center" | "justify" | "left" | "right" | "end" | "start" | "match-parent">;
default: string;
};
type: {
@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{
default: () => never[];
};
justify: {
type: PropType<"center" | "left" | "right" | "justify" | "end" | "start" | "match-parent">;
type: PropType<"center" | "justify" | "left" | "right" | "end" | "start" | "match-parent">;
default: string;
};
type: {
@ -33,6 +33,6 @@ declare const _default: import("vue").DefineComponent<{
}, {
type: "default" | "card";
labels: unknown[];
justify: "center" | "left" | "right" | "justify" | "end" | "start" | "match-parent";
justify: "center" | "justify" | "left" | "right" | "end" | "start" | "match-parent";
}, {}>;
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(): {
Form: import("vue").Ref<any>;
config: {
@ -22,7 +23,7 @@ export declare function useForm(): {
items: {
[x: string]: any;
type?: "tabs" | undefined;
prop?: string | undefined;
prop?: (string & {}) | undefined;
props?: {
[x: string]: any;
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";
export declare function usePlugins({ visible }: {
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;
inline: BooleanConstructor;
}>>, {
inline: boolean;
inner: boolean;
inline: boolean;
}, {}>;
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";
declare const _default: import("vue").DefineComponent<{
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): {
Table: import("vue").Ref<any>;
config: {
@ -103,10 +104,10 @@ export declare function useTable(props: any): {
scope: obj;
}) => void;
})[];
align: "center" | "left" | "right";
align: ElementPlus.Align;
label: any;
className: string;
prop: string;
prop: string & {};
orderNum: number;
width: number;
minWidth: string | number;
@ -119,7 +120,7 @@ export declare function useTable(props: any): {
sortBy: string | any[] | ((row: any, index: number) => any);
resizable: boolean;
columnKey: string;
headerAlign: string;
headerAlign: ElementPlus.Align;
showOverflowTooltip: boolean;
fixed: string | boolean;
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(): {
renderColumn: (columns: ClTable.Column[]) => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;

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

@ -1,7 +1,7 @@
/// <reference types="../index" />
import { Ref } from "vue";
export declare function useCrud(options?: DeepPartial<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 useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void): Ref<ClCrud.Ref | 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 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>;

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

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

3
src/config/proxy.ts
View File

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

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

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

8
yarn.lock
View File

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