This commit is contained in:
神仙都没用 2025-01-03 13:42:50 +08:00
parent 72f4c591ce
commit e4497e33c7
9 changed files with 132 additions and 54 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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);
} }
});
} }
// 消息事件 // 消息事件

View File

@ -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
}; };
} }

View File

@ -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);

View File

@ -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;
} }

View File

@ -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 || '');
} }
} }
} }

View File

@ -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();
} }
} }

View File

@ -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