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

优化，crud添加 prop 提示

Browse Source
This commit is contained in:
神仙都没用 2024-01-15 13:30:07 +08:00
parent 06923e8990
commit 428f77220c
13 changed files with 102 additions and 92 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.1.0",
"@cool-vue/crud": "^7.1.3",
"@element-plus/icons-vue": "^2.1.0",
"@vueuse/core": "^10.4.0",
"@wangeditor/editor": "^5.1.23",

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

@ -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;
@ -333,6 +333,7 @@ declare namespace ClTable {
search: {
isInput: boolean;
value: any;
refreshOnChange: Boolean;
component: Render.Component;
};
dict: DictOptions | Vue.Ref<DictOptions>;
@ -626,7 +627,7 @@ declare namespace ClUpsert {
mode: "add" | "update" | "info";
}
interface Options<T> extends DeepPartial<Config> {
interface Options<T = any> extends DeepPartial<Config<T>> {
items?: ClForm.Items<T>;
}
}

2
packages/crud/package.json
View File

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

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

@ -1,69 +1,23 @@
<template>
<div>
<div>CRUD v7.0.0</div>
<div>CRUD DEMO 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";
<script setup lang="tsx">
import { useTable, useForm, useSearch, useUpsert, useAdvSearch } from "./hooks";
// Test
interface Data {
name?: 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: [
{
label: "xx",
prop: "a"
}
]
});
const Form = useForm<Data>();
Form.value?.open({
items: [
{
type: "tabs",
prop: "age"
}
]
});
const Upsert = useUpsert<Data>({
items: [
{
@ -79,6 +33,32 @@ const Upsert = useUpsert<Data>({
label: "x"
};
}
],
onOpened(data) {}
});
const Table = useTable<Data>({
columns: [
{
label: "xx",
prop: "a",
search: {
component: {
name: "el-date-picker"
}
}
}
]
});
const Form = useForm<Data>();
Form.value?.open({
items: [
{
type: "tabs",
prop: "age"
}
]
});

11
packages/crud/src/components/table/helper/header.tsx
View File

@ -47,10 +47,13 @@ export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
item.search.value = val;
},
onChange(val: any) {
crud.value?.refresh({
page: 1,
[item.prop]: val === "" ? undefined : val
});
// 更改时刷新列表
if (item.search.refreshOnChange) {
crud.value?.refresh({
page: 1,
[item.prop]: val === "" ? undefined : val
});
}
}
});

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

@ -65,7 +65,7 @@ export function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void
provide("useCrud__options", options);
}
watch(Crud, (val: any) => {
watch(Crud, (val) => {
if (val) {
if (cb) {
cb(val);
@ -77,7 +77,7 @@ export function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void
}
// 新增、编辑
export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref> {
export function useUpsert<T = any>(options?: ClUpsert.Options<T>) {
const Upsert = ref<ClUpsert.Ref>();
useParent("cl-upsert", Upsert);
@ -87,7 +87,7 @@ export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.
watch(
Upsert,
(val: any) => {
(val) => {
if (val) {
if (options) {
const event = useEvent(["onOpen", "onOpened", "onClosed"], {
@ -105,7 +105,7 @@ export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.
}
);
return Upsert as Ref<ClUpsert.Ref<T>>;
return Upsert;
}
// 表格
@ -164,7 +164,7 @@ export function useDialog(options?: { onFullscreen(visible: boolean): void }) {
watch(
() => Dialog?.fullscreen.value,
(val: any) => {
(val) => {
options?.onFullscreen(val);
}
);

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

@ -66,11 +66,9 @@ export declare function useForm(): {
label?: string | undefined;
renderLabel?: any;
flex?: boolean | undefined;
hidden?: boolean | ((options: {
hidden?: ((options: {
scope: obj;
}) => boolean) | {
value: boolean;
} | undefined;
}) => boolean) | undefined;
prepend?: {
[x: string]: any;
name?: string | undefined;
@ -189,9 +187,9 @@ export declare function useForm(): {
form: obj;
isReset?: boolean | undefined;
on?: {
open?: ((data: obj) => void) | undefined;
open?: ((data: any) => void) | undefined;
close?: ((action: ClForm.CloseAction, done: fn) => void) | undefined;
submit?: ((data: obj, event: {
submit?: ((data: any, event: {
close: fn;
done: fn;
}) => void) | undefined;

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

@ -42,6 +42,9 @@ export declare function useTable(props: any): {
search: {
isInput: boolean;
value: any;
refreshOnChange: {
valueOf: () => boolean;
};
component: {
[x: string]: any;
name?: string | undefined;

2
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?: 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 useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref<any> | 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>;

3
src/config/proxy.ts
View File

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

7
src/modules/demo/components/form-btn.vue
View File

@ -35,7 +35,7 @@
</template>
<script lang="ts" setup>
import { useCrud, useForm, useTable, useUpsert } from "@cool-vue/crud";
import { useCrud, useForm, useTable, useUpsert, setFocus } from "@cool-vue/crud";
import { useCool } from "/@/cool";
const { refs, setRefs, service } = useCool();
@ -57,7 +57,8 @@ const Upsert = useUpsert({
name: "el-date-picker"
}
}
]
],
plugins: [setFocus()]
});
// cl-table
@ -104,7 +105,7 @@ function open() {
labelPosition: "top"
},
dialog: {
height: "500px",
height: "70vh",
width: "1000px"
},
items: [

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

@ -151,7 +151,8 @@ function refresh(params?: any) {
}
// 新增、编辑
const Upsert = useUpsert({
// 插入类型 <Eps.UserInfoEntity>，prop 和 data 会有提示
const Upsert = useUpsert<Eps.UserInfoEntity>({
dialog: {
height: "600px", // 固定高
width: "1000px" // 固定宽
@ -165,15 +166,15 @@ const Upsert = useUpsert({
type: "card",
labels: [
{
label: "基础",
label: "基础信息",
value: "base"
},
{
label: "选择",
label: "选择用户",
value: "select"
},
{
label: "其他",
label: "其他配置",
value: "other"
}
]
@ -181,7 +182,7 @@ const Upsert = useUpsert({
},
{
label: "头像",
prop: "avatar",
prop: "avatarUrl",
group: "base",
component: {
name: "cl-upload"
@ -240,13 +241,34 @@ const Upsert = useUpsert({
]
},
{
label: "省市区",
prop: "pca",
prop: "contact",
group: "base",
component: {
name: "cl-distpicker"
}
name: "cl-form-card",
props: {
label: "联系信息",
expand: false
}
},
children: [
{
label: "手机号",
prop: "phone",
component: {
name: "el-input"
}
},
{
label: "省市区",
prop: "pca",
group: "base",
component: {
name: "cl-distpicker"
}
}
]
},
{
label: "",
prop: "userIds",
@ -400,7 +422,6 @@ const Table = useTable({
// 带搜索组件
search: {
// cool渲染方式
component: {
name: "el-input",
props: {
@ -430,7 +451,6 @@ const Table = useTable({
// 带搜索组件
search: {
// jsx方式
component: {
name: "cl-select",
props: {
@ -455,9 +475,14 @@ const Table = useTable({
prop: "createTime",
sortable: "custom",
search: {
component: (
<cl-date-picker type="date" value-format="YYYY-MM-DD" placeholder="搜索日期" />
)
component: {
name: "cl-date-picker",
props: {
type: "date",
valueFormat: "YYYY-MM-DD",
placeholder: "搜索日期"
}
}
}
},
{

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.1.0":
version "7.1.0"
resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-7.1.0.tgz#bed31f8059f55fba9dafa03b028216ac52685fe6"
integrity sha512-ai3QIim55AuWGSpRqgYU4b7vppfqFx4V7vP1htDIwhdY9oMGRiyzedjE1yvwuvHE7E9By9zuMfO5D8AuB9lXbQ==
"@cool-vue/crud@^7.1.3":
version "7.1.3"
resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.1.3.tgz#494823c9b9d3db7c03624ee82b5d59330977989e"
integrity sha512-jSCLPfD/ADfarhI/4e6dWLWmXh2LxTGED4W1RwhgNZWFbM7zSjTc4bPfK3v8AMEcELs6e2ZIFGfcurlG/qc8AQ==
dependencies:
array.prototype.flat "^1.2.4"
core-js "^3.21.1"