This commit is contained in:
神仙都没用 2024-12-24 15:57:02 +08:00
parent c205a67d8b
commit 17f7288328
12 changed files with 162 additions and 143 deletions

View File

@ -12,7 +12,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"@cool-vue/crud": "^7.2.3",
"@cool-vue/crud": "^7.2.5",
"@element-plus/icons-vue": "^2.3.1",
"@vueuse/core": "^11.1.0",
"@wangeditor/editor": "^5.1.23",
@ -40,7 +40,7 @@
"xlsx": "^0.18.5"
},
"devDependencies": {
"@cool-vue/vite-plugin": "^7.2.4",
"@cool-vue/vite-plugin": "^7.2.5",
"@rushstack/eslint-patch": "^1.10.4",
"@tsconfig/node20": "^20.1.4",
"@types/file-saver": "^2.0.7",

View File

@ -9,12 +9,12 @@ declare namespace Vue {
// element-plus
declare namespace ElementPlus {
type Size = 'large' | 'default' | 'small';
type Align = 'left' | 'center' | 'right';
type Size = "large" | "default" | "small";
type Align = "left" | "center" | "right";
interface FormProps {
inline?: boolean;
labelPosition?: 'left' | 'right' | 'top';
labelPosition?: "left" | "right" | "top";
labelWidth?: string | number;
labelSuffix?: string;
hideRequiredAsterisk?: boolean;
@ -60,8 +60,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;
@ -240,51 +240,51 @@ declare namespace ClCrud {
interface Service {
api: {
page(params?: Params['page']): Promise<Response['page']>;
list(params?: Params['list']): Promise<Response['list']>;
add(params?: Params['add']): Promise<Response['add']>;
update(params?: Params['update']): Promise<Response['update']>;
info(params?: Params['info']): Promise<Response['info']>;
delete(params?: Params['delete']): Promise<Response['delete']>;
page(params?: Params["page"]): Promise<Response["page"]>;
list(params?: Params["list"]): Promise<Response["list"]>;
add(params?: Params["add"]): Promise<Response["add"]>;
update(params?: Params["update"]): Promise<Response["update"]>;
info(params?: Params["info"]): Promise<Response["info"]>;
delete(params?: Params["delete"]): Promise<Response["delete"]>;
[key: string]: (params?: any) => Promise<any>;
};
}
interface Config {
name: string;
service: Service['api'];
service: Service["api"];
permission: Permission;
dict: Dict;
onRefresh(
params: obj,
event: {
done: fn;
next: Service['api']['page'];
render: (data: any | any[], pagination?: Response['page']['pagination']) => void;
next: Service["api"]["page"];
render: (data: any | any[], pagination?: Response["page"]["pagination"]) => void;
}
): void;
onDelete(
selection: obj[],
event: {
next: Service['api']['delete'];
next: Service["api"]["delete"];
}
): void;
}
interface Ref {
'cl-table': ClTable.Ref;
'cl-upsert': ClUpsert.Ref;
"cl-table": ClTable.Ref;
"cl-upsert": ClUpsert.Ref;
id: number;
mitt: Mitt;
name: string;
routePath: string;
permission: Permission;
dict: Dict;
service: Service['api'];
service: Service["api"];
loading: boolean;
params: obj;
selection: obj[];
set(key: 'dict' | 'style' | 'service' | 'permission', value: any): void;
set(key: "dict" | "style" | "service" | "permission", value: any): void;
done(): void;
getParams(): obj;
getPermission(key?: string): boolean;
@ -296,7 +296,7 @@ declare namespace ClCrud {
rowDelete(...selection: obj[]): void;
proxy(name: string, data?: any[]): any;
paramsReplace(params: obj): obj;
refresh: Service['api']['page'];
refresh: Service["api"]["page"];
[key: string]: any;
}
@ -306,9 +306,9 @@ declare namespace ClCrud {
}
declare namespace ClTable {
type OpButton = Array<'info' | 'edit' | 'delete' | AnyString | Render.OpButton>;
type OpButton = Array<"info" | "edit" | "delete" | AnyString | Render.OpButton>;
type ColumnType = 'index' | 'selection' | 'expand' | 'op' | AnyString;
type ColumnType = "index" | "selection" | "expand" | "op" | AnyString;
interface Column<T = any> {
type: ColumnType;
@ -334,7 +334,7 @@ declare namespace ClTable {
width: RefData<number | string>;
minWidth: RefData<number | string>;
renderHeader: (options: { column: any; $index: number }) => any;
sortable: boolean | 'desc' | 'descending' | 'ascending' | 'asc' | 'custom';
sortable: boolean | "desc" | "descending" | "ascending" | "asc" | "custom";
sortMethod: fn;
sortBy: string | ((row: T, index: number) => any) | any[];
resizable: boolean;
@ -359,14 +359,14 @@ declare namespace ClTable {
type ContextMenu = Array<
| ClContextMenu.Item
| ((row: obj, column: obj, event: PointerEvent) => ClContextMenu.Item)
| 'refresh'
| 'check'
| 'update'
| 'edit'
| 'delete'
| 'info'
| 'order-desc'
| 'order-asc'
| "refresh"
| "check"
| "update"
| "edit"
| "delete"
| "info"
| "order-desc"
| "order-asc"
>;
type Plugin = (options: { exposed: Ref }) => void;
@ -378,7 +378,7 @@ declare namespace ClTable {
contextMenu: ContextMenu;
defaultSort: {
prop: string;
order: 'descending' | 'ascending';
order: "descending" | "ascending";
};
sortRefresh: boolean;
emptyText: string;
@ -432,25 +432,25 @@ declare namespace ClFormTabs {
}
declare namespace ClForm {
type CloseAction = 'close' | 'save' | AnyString;
type CloseAction = "close" | "save" | AnyString;
interface Rule {
type?:
| 'string'
| 'number'
| 'boolean'
| 'method'
| 'regexp'
| 'integer'
| 'float'
| 'array'
| 'object'
| 'enum'
| 'date'
| 'url'
| 'hex'
| 'email'
| 'any';
| "string"
| "number"
| "boolean"
| "method"
| "regexp"
| "integer"
| "float"
| "array"
| "object"
| "enum"
| "date"
| "url"
| "hex"
| "email"
| "any";
required?: boolean;
message?: string;
min?: number;
@ -462,37 +462,37 @@ declare namespace ClForm {
type HookFn = (
value: any,
options: { form: obj; prop: string; method: 'submit' | 'bind' }
options: { form: obj; prop: string; method: "submit" | "bind" }
) => any;
type HookKey =
| 'number'
| 'string'
| 'split'
| 'join'
| 'boolean'
| 'booleanNumber'
| 'datetimeRange'
| 'splitJoin'
| 'json'
| 'empty'
| "number"
| "string"
| "split"
| "join"
| "boolean"
| "booleanNumber"
| "datetimeRange"
| "splitJoin"
| "json"
| "empty"
| AnyString;
type HookPipe = HookKey | HookFn;
interface Item<T = any> {
type?: 'tabs';
type?: "tabs";
prop?: PropKey<T>;
props?: {
labels?: ClFormTabs.labels;
justify?: 'left' | 'center' | 'right';
justify?: "left" | "center" | "right";
color?: string;
mergeProp?: boolean;
labelWidth?: string;
error?: string;
showMessage?: boolean;
inlineMessage?: boolean;
size?: 'medium' | 'default' | 'small';
size?: "medium" | "default" | "small";
[key: string]: any;
};
span?: number;
@ -548,7 +548,7 @@ declare namespace ClForm {
hidden?: boolean;
saveButtonText?: string;
closeButtonText?: string;
justify?: 'flex-start' | 'center' | 'flex-end';
justify?: "flex-start" | "center" | "flex-end";
buttons?: Array<CloseAction | Render.OpButton>;
};
dialog: {
@ -556,7 +556,7 @@ declare namespace ClForm {
height?: string;
width?: string;
hideHeader?: boolean;
controls?: Array<'fullscreen' | 'close' | AnyString>;
controls?: Array<"fullscreen" | "close" | AnyString>;
[key: string]: any;
};
[key: string]: any;
@ -619,26 +619,26 @@ declare namespace ClUpsert {
interface Config<T = any> {
sync: boolean;
items: ClForm.Item[];
props: ClForm.Config['props'];
op: ClForm.Config['op'];
dialog: ClForm.Config['dialog'];
props: ClForm.Config["props"];
op: ClForm.Config["op"];
dialog: ClForm.Config["dialog"];
onOpen?(): void;
onOpened?(data: T): void;
onClose?(action: ClForm.CloseAction, done: fn): void;
onClosed?(): void;
onInfo?(
data: T,
event: { close: fn; done(data: T): void; next: ClCrud.Service['api']['info'] }
event: { close: fn; done(data: T): void; next: ClCrud.Service["api"]["info"] }
): void;
onSubmit?(
data: T,
event: { close: fn; done: fn; next: ClCrud.Service['api']['update'] }
event: { close: fn; done: fn; next: ClCrud.Service["api"]["update"] }
): void;
plugins?: ClForm.Plugin[];
}
interface Ref<T = any> extends ClForm.Ref<T> {
mode: 'add' | 'update' | 'info' | AnyString;
mode: "add" | "update" | "info" | AnyString;
}
interface Options<T = any> extends DeepPartial<Config<T>> {
@ -651,8 +651,8 @@ declare namespace ClAdvSearch {
items?: ClForm.Item[];
title?: string;
size?: string | number;
op?: ('clear' | 'reset' | 'close' | 'search' | `slot-${string}`)[];
onSearch?(data: T, options: { next: ClCrud.Service['api']['page']; close(): void }): void;
op?: ("clear" | "reset" | "close" | "search" | `slot-${string}`)[];
onSearch?(data: T, options: { next: ClCrud.Service["api"]["page"]; close(): void }): void;
}
interface Ref<T = any> extends ClForm.Ref<T> {}
@ -672,7 +672,7 @@ declare namespace ClSearch {
Form?: ClForm.Ref;
onChange?(data: T, prop: string): void;
onLoad?(data: T): void;
onSearch?(data: T, options: { next: ClCrud.Service['api']['page'] }): void;
onSearch?(data: T, options: { next: ClCrud.Service["api"]["page"] }): void;
}
interface Ref<T = any> extends ClForm.Ref<T> {
@ -743,8 +743,8 @@ declare interface Config {
size: ElementPlus.Size;
colors: string[];
form: {
labelPosition: ElementPlus.FormProps['labelPosition'];
labelWidth: ElementPlus.FormProps['labelWidth'];
labelPosition: ElementPlus.FormProps["labelPosition"];
labelWidth: ElementPlus.FormProps["labelWidth"];
span: number;
plugins: ClForm.Plugin[];
};

View File

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

View File

@ -1,11 +1,10 @@
<template>
<div>
<div class="title">CRUD DEMO v7.0.0</div>
<div class="title">CRUD DEMO v7</div>
<cl-crud ref="Crud">
<cl-row>
<cl-add-btn />
<cl-adv-btn />
<cl-flex1 />
@ -22,7 +21,7 @@
}
]"
refreshOnInput
></cl-search-key>
/>
</cl-row>
<cl-row>
@ -35,12 +34,12 @@
</cl-row>
<cl-upsert ref="Upsert"></cl-upsert>
<cl-adv-search ref="AdvSearch"></cl-adv-search>
</cl-crud>
</div>
</template>
<script setup lang="tsx">
import { computed } from "vue";
import { useTable, useForm, useUpsert, useCrud } from "./hooks";
import { EditPen } from "@element-plus/icons-vue";
@ -103,54 +102,59 @@ const Upsert = useUpsert<Data>({
}
});
const Table = useTable<Data>({
contextMenu: [
{
label: "带图标",
prefixIcon: EditPen
},
{
label: "多层级",
children: [
{
label: "A",
children: [
{
label: "A-1"
}
]
},
{
label: "B"
}
]
}
],
const Table = useTable<Data>(
{
contextMenu: [
{
label: "带图标",
prefixIcon: EditPen
},
{
label: "多层级",
children: [
{
label: "A",
children: [
{
label: "A-1"
}
]
},
{
label: "B"
}
]
}
],
columns: [
{
label: "姓名",
prop: "name",
search: {
component: {
name: "el-date-picker"
columns: [
{
label: "姓名",
prop: "name",
search: {
component: {
name: "el-date-picker"
}
}
}
},
{
label: "手机号",
prop: "phone",
search: {
component: {
name: "el-date-picker"
},
{
label: "手机号",
prop: "phone",
search: {
component: {
name: "el-date-picker"
}
}
},
{
type: "op"
}
},
{
type: "op"
}
]
});
]
},
(table) => {
console.log(table);
}
);
const Crud = useCrud(
{

View File

@ -82,7 +82,10 @@ export default defineComponent({
...params,
[selectField.value]: value.value || undefined,
...newParams
});
})
.catch(err => {
console.error(err);
})
loading.value = false;
}

View File

@ -120,7 +120,7 @@ export function useUpsert<T = any>(options?: ClUpsert.Options<T>) {
}
// 表格
export function useTable<T = any>(options?: ClTable.Options<T>) {
export function useTable<T = any>(options?: ClTable.Options<T>, cb?: (table: ClTable.Ref) => void) {
const Table = ref<ClTable.Ref<T>>();
useParent("cl-table", Table);
@ -128,6 +128,14 @@ export function useTable<T = any>(options?: ClTable.Options<T>) {
provide("useTable__options", options);
}
watch(Table, (val) => {
if (val) {
if (cb) {
cb(val);
}
}
});
return Table;
}

View File

@ -20,6 +20,6 @@
"paths": {},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules", "src/demo/*", "src/main.ts", "src/components/*"]
"include": ["src"],
"exclude": ["node_modules", "src/main.ts"]
}

View File

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

View File

@ -206,7 +206,7 @@ export declare function useForm(): {
saveButtonText?: string | undefined;
closeButtonText?: string | undefined;
justify?: "center" | "flex-start" | "flex-end" | undefined;
buttons?: (ClForm.CloseAction | `slot-${string}` | {
buttons?: (`slot-${string}` | ClForm.CloseAction | {
[x: string]: any;
label: string;
type?: string | undefined;

View File

@ -114,13 +114,17 @@ export declare function useTable(props: any): {
className: string;
prop: string & {};
orderNum: number;
width: number;
minWidth: string | number;
width: string | number | {
value: string | number;
};
minWidth: string | number | {
value: string | number;
};
renderHeader: (options: {
column: any;
$index: number;
}) => any;
sortable: boolean | "asc" | "desc" | "custom" | "descending" | "ascending";
sortable: boolean | "asc" | "desc" | "descending" | "ascending" | "custom";
sortMethod: fn;
sortBy: string | any[] | ((row: any, index: number) => any);
resizable: boolean;

View File

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

10
pnpm-lock.yaml generated
View File

@ -9,8 +9,8 @@ importers:
.:
dependencies:
'@cool-vue/crud':
specifier: ^7.2.3
version: 7.2.3(typescript@5.5.4)
specifier: ^7.2.5
version: 7.2.5(typescript@5.5.4)
'@element-plus/icons-vue':
specifier: ^2.3.1
version: 2.3.1(vue@3.5.13(typescript@5.5.4))
@ -330,8 +330,8 @@ packages:
resolution: {integrity: sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==}
engines: {node: '>=6.9.0'}
'@cool-vue/crud@7.2.3':
resolution: {integrity: sha512-TItRbZBGrTcHby9iKWG27PxD9KppUnfDXEj7ZCn8s41p8+5g3za2O1UU12xj/1/UhEqq9xbkDlyDeseJuxLdug==}
'@cool-vue/crud@7.2.5':
resolution: {integrity: sha512-+kvWAfz77jTDZqDfQPDsl2dzOeJs7TptOH/maBfwO3iyZcTaYBbcFEBpWG5vjaUeva8Fuo1rlmlr5q/OykuX7Q==}
'@cool-vue/vite-plugin@7.2.4':
resolution: {integrity: sha512-lRVoCHeOQ+ZYnpCbVtfTGafdQ/glpb9Nk4YydGseNjVoXLfeJBGkZx2xsHOt54fjlFQMWyi+k4Qo28Ymgigtsg==}
@ -3283,7 +3283,7 @@ snapshots:
'@babel/helper-string-parser': 7.25.9
'@babel/helper-validator-identifier': 7.25.9
'@cool-vue/crud@7.2.3(typescript@5.5.4)':
'@cool-vue/crud@7.2.5(typescript@5.5.4)':
dependencies:
'@element-plus/icons-vue': 2.3.1(vue@3.5.13(typescript@5.5.4))
array.prototype.flat: 1.3.3