mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-13 14:12:50 +00:00
优化
This commit is contained in:
parent
72f4c591ce
commit
e4497e33c7
48
packages/crud/index.d.ts
vendored
48
packages/crud/index.d.ts
vendored
@ -289,6 +289,7 @@ declare namespace ClCrud {
|
|||||||
set(key: "dict" | "style" | "service" | "permission", value: any): void;
|
set(key: "dict" | "style" | "service" | "permission", value: any): void;
|
||||||
done(): void;
|
done(): void;
|
||||||
getParams(): obj;
|
getParams(): obj;
|
||||||
|
setParams(data: obj): void;
|
||||||
getPermission(key?: string): boolean;
|
getPermission(key?: string): boolean;
|
||||||
rowInfo(data: obj): void;
|
rowInfo(data: obj): void;
|
||||||
rowAdd(): void;
|
rowAdd(): void;
|
||||||
@ -462,25 +463,27 @@ declare namespace ClForm {
|
|||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
type HookFn = (
|
interface Hook {
|
||||||
value: any,
|
Fn: (value: any, options: { form: obj; prop: string; method: "submit" | "bind" }) => any;
|
||||||
options: { form: obj; prop: string; method: "submit" | "bind" }
|
Key:
|
||||||
) => any;
|
| "number"
|
||||||
|
| "string"
|
||||||
type HookKey =
|
| "split"
|
||||||
| "number"
|
| "join"
|
||||||
| "string"
|
| "boolean"
|
||||||
| "split"
|
| "booleanNumber"
|
||||||
| "join"
|
| "datetimeRange"
|
||||||
| "boolean"
|
| "splitJoin"
|
||||||
| "booleanNumber"
|
| "json"
|
||||||
| "datetimeRange"
|
| "empty"
|
||||||
| "splitJoin"
|
| AnyString;
|
||||||
| "json"
|
Pipe: Hook["Key"] | Hook["Fn"];
|
||||||
| "empty"
|
Event: {
|
||||||
| AnyString;
|
bind?: Hook["Pipe"] | Hook["Pipe"][];
|
||||||
|
submit?: Hook["Pipe"] | Hook["Pipe"][];
|
||||||
type HookPipe = HookKey | HookFn;
|
reset?: (prop: string) => string[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
interface Item<T = any> {
|
interface Item<T = any> {
|
||||||
type?: "tabs";
|
type?: "tabs";
|
||||||
@ -516,12 +519,7 @@ declare namespace ClForm {
|
|||||||
label?: string;
|
label?: string;
|
||||||
renderLabel?: any;
|
renderLabel?: any;
|
||||||
flex?: boolean;
|
flex?: boolean;
|
||||||
hook?:
|
hook?: Hook["Event"] | Hook["Key"];
|
||||||
| HookKey
|
|
||||||
| {
|
|
||||||
bind?: HookPipe | HookPipe[];
|
|
||||||
submit?: HookPipe | HookPipe[];
|
|
||||||
};
|
|
||||||
hidden?: boolean | ((options: { scope: obj }) => boolean);
|
hidden?: boolean | ((options: { scope: obj }) => boolean);
|
||||||
prepend?: Render.Component;
|
prepend?: Render.Component;
|
||||||
component?: Render.Component;
|
component?: Render.Component;
|
||||||
|
|||||||
@ -3,6 +3,10 @@
|
|||||||
<div class="title">CRUD DEMO v7</div>
|
<div class="title">CRUD DEMO v7</div>
|
||||||
|
|
||||||
<cl-crud ref="Crud">
|
<cl-crud ref="Crud">
|
||||||
|
<div class="search">
|
||||||
|
<cl-search ref="Search" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<cl-row>
|
<cl-row>
|
||||||
<cl-add-btn />
|
<cl-add-btn />
|
||||||
|
|
||||||
@ -40,7 +44,7 @@
|
|||||||
|
|
||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import { useTable, useForm, useUpsert, useCrud } from "./hooks";
|
import { useTable, useForm, useUpsert, useCrud, useSearch } from "./hooks";
|
||||||
import { EditPen } from "@element-plus/icons-vue";
|
import { EditPen } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
interface Data {
|
interface Data {
|
||||||
@ -76,7 +80,6 @@ const Upsert = useUpsert<Data>({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
group: "B",
|
group: "B",
|
||||||
prop: "证书",
|
|
||||||
component: {
|
component: {
|
||||||
name: "el-input"
|
name: "el-input"
|
||||||
},
|
},
|
||||||
@ -166,6 +169,26 @@ const Crud = useCrud(
|
|||||||
);
|
);
|
||||||
|
|
||||||
const Form = useForm<Data>();
|
const Form = useForm<Data>();
|
||||||
|
|
||||||
|
const Search = useSearch({
|
||||||
|
collapse: true,
|
||||||
|
resetBtn: true,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: "姓名",
|
||||||
|
prop: "name",
|
||||||
|
component: {
|
||||||
|
name: "el-input"
|
||||||
|
},
|
||||||
|
hook: {
|
||||||
|
reset() {
|
||||||
|
console.log(1111);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -174,4 +197,11 @@ const Form = useForm<Data>();
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { Close } from "@element-plus/icons-vue";
|
|||||||
import { useBrowser, useConfig, useCore } from "../../hooks";
|
import { useBrowser, useConfig, useCore } from "../../hooks";
|
||||||
import { renderNode } from "../../utils/vnode";
|
import { renderNode } from "../../utils/vnode";
|
||||||
import { useApi } from "../form/helper";
|
import { useApi } from "../form/helper";
|
||||||
|
import { isArray } from "lodash-es";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "cl-adv-search",
|
name: "cl-adv-search",
|
||||||
@ -58,7 +59,7 @@ export default defineComponent({
|
|||||||
function open() {
|
function open() {
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
|
|
||||||
nextTick(function () {
|
nextTick(() => {
|
||||||
Form.value?.open({
|
Form.value?.open({
|
||||||
items: config.items || [],
|
items: config.items || [],
|
||||||
op: {
|
op: {
|
||||||
@ -76,9 +77,30 @@ export default defineComponent({
|
|||||||
|
|
||||||
// 重置数据
|
// 重置数据
|
||||||
function reset() {
|
function reset() {
|
||||||
|
const d: any = {};
|
||||||
|
|
||||||
|
config.items?.map((e) => {
|
||||||
|
if (typeof e.hook != 'string' && e.hook?.reset) {
|
||||||
|
const props = e.hook.reset(e.prop!)
|
||||||
|
|
||||||
|
if (isArray(props)) {
|
||||||
|
props.forEach((prop) => {
|
||||||
|
d[prop] = undefined;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
d[e.prop!] = undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
Form.value?.reset();
|
Form.value?.reset();
|
||||||
emit("reset");
|
|
||||||
|
// 列表刷新
|
||||||
search();
|
search();
|
||||||
|
|
||||||
|
// 重置事件
|
||||||
|
emit("reset", d);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 清空数据
|
// 清空数据
|
||||||
@ -88,24 +110,22 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 搜素请求
|
// 搜素请求
|
||||||
function search() {
|
function search(params?: any) {
|
||||||
Form.value?.submit((data) => {
|
function next(data: any) {
|
||||||
function next(params: any) {
|
Form.value?.done();
|
||||||
Form.value?.done();
|
close();
|
||||||
close();
|
|
||||||
|
|
||||||
return crud.refresh({
|
return crud.refresh({
|
||||||
...params,
|
...data,
|
||||||
page: 1
|
page: 1
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.onSearch) {
|
if (config.onSearch) {
|
||||||
config.onSearch(data, { next, close });
|
config.onSearch(params, { next, close });
|
||||||
} else {
|
} else {
|
||||||
next(data);
|
next(params);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 消息事件
|
// 消息事件
|
||||||
|
|||||||
@ -220,6 +220,11 @@ export function useHelper({ config, crud, mitt }: Options) {
|
|||||||
return crud.params;
|
return crud.params;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 替换请求参数
|
||||||
|
function setParams(data: obj) {
|
||||||
|
merge(crud.params, data);
|
||||||
|
}
|
||||||
|
|
||||||
// 设置
|
// 设置
|
||||||
function set(key: string, value: any) {
|
function set(key: string, value: any) {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
@ -276,6 +281,7 @@ export function useHelper({ config, crud, mitt }: Options) {
|
|||||||
refresh,
|
refresh,
|
||||||
getPermission,
|
getPermission,
|
||||||
paramsReplace,
|
paramsReplace,
|
||||||
getParams
|
getParams,
|
||||||
|
setParams
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,6 +14,7 @@ import {
|
|||||||
import { useApi } from "../form/helper";
|
import { useApi } from "../form/helper";
|
||||||
import { Search, Refresh, Bottom, Top } from "@element-plus/icons-vue";
|
import { Search, Refresh, Bottom, Top } from "@element-plus/icons-vue";
|
||||||
import { mitt } from "../../utils/mitt";
|
import { mitt } from "../../utils/mitt";
|
||||||
|
import { isArray, isObject, isString } from "lodash-es";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "cl-search",
|
name: "cl-search",
|
||||||
@ -121,6 +122,16 @@ export default defineComponent({
|
|||||||
const d: any = {};
|
const d: any = {};
|
||||||
|
|
||||||
config.items?.map((e) => {
|
config.items?.map((e) => {
|
||||||
|
if (typeof e.hook != 'string' && e.hook?.reset) {
|
||||||
|
const props = e.hook.reset(e.prop!)
|
||||||
|
|
||||||
|
if (isArray(props)) {
|
||||||
|
props.forEach((prop) => {
|
||||||
|
d[prop] = undefined;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
d[e.prop!] = undefined;
|
d[e.prop!] = undefined;
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -128,7 +139,7 @@ export default defineComponent({
|
|||||||
Form.value?.reset();
|
Form.value?.reset();
|
||||||
|
|
||||||
// 列表刷新
|
// 列表刷新
|
||||||
crud.refresh(d);
|
search(d);
|
||||||
|
|
||||||
// 重置事件
|
// 重置事件
|
||||||
emit("reset", d);
|
emit("reset", d);
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { isArray, isEmpty, isFunction, isObject, isString } from "lodash-es";
|
import { isArray, isEmpty, isFunction, isObject, isString } from "lodash-es";
|
||||||
|
|
||||||
export const format: { [key: string]: ClForm.HookFn } = {
|
export const format: { [key: string]: ClForm.Hook["Fn"] } = {
|
||||||
number(value) {
|
number(value) {
|
||||||
return value ? (isArray(value) ? value.map(Number) : Number(value)) : value;
|
return value ? (isArray(value) ? value.map(Number) : Number(value)) : value;
|
||||||
},
|
},
|
||||||
@ -142,7 +142,7 @@ const formHook = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export function registerFormHook(name: string, fn: ClForm.HookFn) {
|
export function registerFormHook(name: string, fn: ClForm.Hook["Fn"]) {
|
||||||
format[name] = fn;
|
format[name] = fn;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -139,7 +139,7 @@ export function renderNode(vnode: any, options: Options) {
|
|||||||
|
|
||||||
if (placeholder) {
|
if (placeholder) {
|
||||||
if (!item.component.props.placeholder) {
|
if (!item.component.props.placeholder) {
|
||||||
item.component.props.placeholder = placeholder + item.label;
|
item.component.props.placeholder = placeholder + (item.label || '');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -121,26 +121,29 @@ function openCM(e: any, item: Process.Item) {
|
|||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
label: '关闭当前',
|
label: '关闭当前',
|
||||||
hidden: item.fullPath !== route.path,
|
hidden: item.path !== route.path,
|
||||||
callback(done) {
|
callback(done) {
|
||||||
onDel(process.list.findIndex(e => e.fullPath == item.fullPath));
|
|
||||||
done();
|
done();
|
||||||
|
|
||||||
|
process.close();
|
||||||
toPath();
|
toPath();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '关闭其他',
|
label: '关闭其他',
|
||||||
callback(done) {
|
callback(done) {
|
||||||
process.set(process.list.filter(e => e.fullPath == item.fullPath));
|
|
||||||
done();
|
done();
|
||||||
|
|
||||||
|
process.set(process.list.filter(e => e.fullPath == item.fullPath));
|
||||||
toPath();
|
toPath();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '关闭所有',
|
label: '关闭所有',
|
||||||
callback(done) {
|
callback(done) {
|
||||||
process.clear();
|
|
||||||
done();
|
done();
|
||||||
|
|
||||||
|
process.clear();
|
||||||
toPath();
|
toPath();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,6 +26,15 @@ export const useProcessStore = defineStore('process', function () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 关闭当前
|
||||||
|
function close() {
|
||||||
|
const index = list.value.findIndex(e => e.active);
|
||||||
|
|
||||||
|
if (index > -1) {
|
||||||
|
list.value.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 移除
|
// 移除
|
||||||
function remove(index: number) {
|
function remove(index: number) {
|
||||||
list.value.splice(index, 1);
|
list.value.splice(index, 1);
|
||||||
@ -54,6 +63,7 @@ export const useProcessStore = defineStore('process', function () {
|
|||||||
list,
|
list,
|
||||||
add,
|
add,
|
||||||
remove,
|
remove,
|
||||||
|
close,
|
||||||
set,
|
set,
|
||||||
clear,
|
clear,
|
||||||
setTitle
|
setTitle
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user