1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
| import { defineComponent, getCurrentInstance, inject, provide, reactive } from "vue";
| import { cloneDeep } from "lodash-es";
| import { useHelper } from "./helper";
| import { Mitt } from "../../utils/mitt";
| import { mergeConfig, merge } from "../../utils";
| import { crudList } from "../../emitter";
| import { useConfig } from "../../hooks";
|
| export default defineComponent({
| name: "cl-crud",
|
| props: {
| // 组件名
| name: String,
| // 是否有边框
| border: Boolean,
| // 内间距
| padding: {
| type: String,
| default: "10px"
| }
| },
|
| setup(props, { slots, expose }) {
| // 当前实例
| const inst = getCurrentInstance();
|
| // 配置
| const config = reactive<ClCrud.Config>(mergeConfig(inject("useCrud__options") || {}));
|
| // 事件
| const mitt = new Mitt(inst?.uid);
|
| // 全局配置
| const { dict, permission } = useConfig();
|
| // 参数
| const crud = reactive(
| merge(
| {
| id: props.name || inst?.uid,
| // 绑定的路由地址
| routePath: location.pathname || "/",
| // 表格加载状态
| loading: false,
| // 表格已选列
| selection: [],
| // 请求参数
| params: {
| page: 1,
| size: 20
| },
| // 请求服务
| service: {},
| // 字典
| dict: {},
| // 权限
| permission: {},
| // 事件
| mitt,
| // 配置
| config
| },
| cloneDeep({ dict, permission })
| )
| );
|
| // 追加参数
| merge(crud, useHelper({ config, crud, mitt }));
|
| // 集合
| crudList.push(crud);
|
| // 值穿透
| provide("crud", crud);
| provide("mitt", mitt);
|
| // 导出
| expose(crud);
|
| return () => {
| return (
| <div
| class={["cl-crud", { "is-border": props.border }]}
| style={{ padding: props.padding }}>
| {slots.default?.()}
| </div>
| );
| };
| }
| });
|
|
