@dazhicheng/ui 1.5.223 → 1.5.224
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/tt-modal/src/components/ModalHeader.vue.js +1 -1
- package/dist/components/tt-table/src/TableForm.vue.d.ts +161 -57
- package/dist/components/tt-table/src/TableForm.vue.js +126 -113
- package/dist/components/tt-table/src/components/TableColumnModal.vue.d.ts +19 -1
- package/dist/components/tt-table/src/components/TableColumnModal.vue2.js +103 -94
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { defineComponent as Y, ref as S, reactive as Z, computed as C, watch as T, createBlock as E, openBlock as m, unref as s, normalizeClass as b, createSlots as ee, withCtx as d, createElementVNode as c, createVNode as a, toDisplayString as h, createElementBlock as v, Fragment as M, renderList as $, createTextVNode as F, createCommentVNode as le, withModifiers as te, renderSlot as V } from "vue";
|
|
2
|
+
import oe from "../../../../assets/svg/close.svg.js";
|
|
3
|
+
import se from "../../../../assets/svg/drag.svg.js";
|
|
4
4
|
import { TtIcon as B } from "../../../tt-icon/index.js";
|
|
5
|
-
import { TtText as
|
|
5
|
+
import { TtText as ne } from "../../../tt-text/index.js";
|
|
6
6
|
import "../../../tt-modal/index.js";
|
|
7
|
-
import { TtButton as
|
|
7
|
+
import { TtButton as ie } from "../../../tt-button/index.js";
|
|
8
8
|
import "../../../../node_modules/.pnpm/vue-types@5.1.3_vue@3.5.21_typescript@5.9.3_/node_modules/vue-types/shim/index.modern.js";
|
|
9
|
-
import { useDesign as
|
|
9
|
+
import { useDesign as de } from "../../../../packages/hooks/src/useDesign.js";
|
|
10
10
|
import "axios";
|
|
11
|
-
import { ElScrollbar as
|
|
11
|
+
import { ElScrollbar as I, ElCheckbox as R, ElCheckboxGroup as ce, ElTooltip as ae } from "element-plus";
|
|
12
12
|
import "dayjs";
|
|
13
13
|
import "xe-utils";
|
|
14
14
|
import "dayjs/plugin/utc";
|
|
@@ -18,81 +18,81 @@ import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/ae
|
|
|
18
18
|
import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/enc-utf8.js";
|
|
19
19
|
import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/mode-ecb.js";
|
|
20
20
|
import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/pad-pkcs7.js";
|
|
21
|
-
import { cloneDeep as
|
|
22
|
-
import
|
|
23
|
-
import { useModalRender as
|
|
24
|
-
const
|
|
21
|
+
import { cloneDeep as re } from "lodash-es";
|
|
22
|
+
import ue from "sortablejs";
|
|
23
|
+
import { useModalRender as me } from "../../../tt-modal/src/hooks/useModalRender.js";
|
|
24
|
+
const fe = { class: "flex-1" }, pe = { class: "cb flex items-center" }, he = { class: "text-[var(--el-text-color-primary)] font-bold" }, xe = { class: "flex flex-col w-[200px] shrink-0" }, Ce = { class: "flex items-center justify-between px-15px pt-12px pb-6px text-xs text-[var(--el-text-color-regular)]" }, be = { class: "flex items-center text-xs" }, ve = ["onClick"], ke = { class: "text-left" }, Le = /* @__PURE__ */ Y({
|
|
25
25
|
__name: "TableColumnModal",
|
|
26
26
|
props: {
|
|
27
27
|
openColumn: { type: Function },
|
|
28
28
|
openExport: { type: Function }
|
|
29
29
|
},
|
|
30
30
|
emits: ["on-submit"],
|
|
31
|
-
setup(
|
|
32
|
-
const r =
|
|
31
|
+
setup(A, { expose: N, emit: j }) {
|
|
32
|
+
const r = A, z = j, { prefixCls: u } = de("table-column-modal"), _ = S(), [D, x] = me(), k = S(!1), l = Z({
|
|
33
33
|
allColumns: [],
|
|
34
34
|
checkedFields: [],
|
|
35
35
|
selectedColumns: [],
|
|
36
36
|
disabledColumnField: []
|
|
37
37
|
});
|
|
38
38
|
let f = null, g = null;
|
|
39
|
-
const p = C(() => l.allColumns.filter((e) => e.field)),
|
|
40
|
-
const e =
|
|
39
|
+
const p = C(() => l.allColumns.filter((e) => e.field)), O = C(() => p.value.filter((e) => !e.disabled)), P = C(() => {
|
|
40
|
+
const e = O.value.length;
|
|
41
41
|
return e === 0 ? !0 : l.checkedFields.filter((t) => !l.disabledColumnField.includes(t)).length === e;
|
|
42
|
-
}),
|
|
42
|
+
}), q = C(() => {
|
|
43
43
|
const e = [.../* @__PURE__ */ new Set([...l.checkedFields, ...l.disabledColumnField])];
|
|
44
44
|
return e.length > 0 && e.length < p.value.length;
|
|
45
45
|
});
|
|
46
|
-
function
|
|
46
|
+
function G(e) {
|
|
47
47
|
const o = p.value;
|
|
48
48
|
l.checkedFields = e ? o.map((t) => t.field) : o.filter((t) => l.disabledColumnField.includes(t.field)).map((t) => t.field);
|
|
49
49
|
}
|
|
50
|
-
function
|
|
50
|
+
function L(e) {
|
|
51
51
|
l.checkedFields = l.checkedFields.filter((o) => o !== e);
|
|
52
52
|
}
|
|
53
|
-
function
|
|
53
|
+
function U() {
|
|
54
54
|
l.checkedFields = l.checkedFields.filter((e) => l.disabledColumnField.includes(e));
|
|
55
55
|
}
|
|
56
56
|
const y = () => {
|
|
57
|
-
|
|
57
|
+
z("on-submit", {
|
|
58
58
|
checkedModel: [...l.selectedColumns.map((e) => e.field)],
|
|
59
59
|
modalApi: x,
|
|
60
60
|
isExport: k.value
|
|
61
61
|
});
|
|
62
62
|
};
|
|
63
|
-
function
|
|
64
|
-
k.value =
|
|
65
|
-
const
|
|
66
|
-
l.disabledColumnField = t, l.allColumns =
|
|
67
|
-
const
|
|
68
|
-
l.checkedFields = [...w], l.selectedColumns = w.map((i) => l.allColumns.find((
|
|
63
|
+
function H({ columns: e, displayFields: o = [], disabledColumnField: t, isExport: n }) {
|
|
64
|
+
k.value = n ?? !1, x.openModal();
|
|
65
|
+
const Q = re(e).filter((i) => i.field);
|
|
66
|
+
l.disabledColumnField = t, l.allColumns = Q.map((i) => ({ ...i, disabled: t.includes(i.field) }));
|
|
67
|
+
const W = new Set(l.allColumns.map((i) => i.field)), w = o.filter((i) => i && W.has(i));
|
|
68
|
+
l.checkedFields = [...w], l.selectedColumns = w.map((i) => l.allColumns.find((X) => X.field === i)).filter(Boolean), g = setTimeout(J, 100);
|
|
69
69
|
}
|
|
70
|
-
function
|
|
70
|
+
function J() {
|
|
71
71
|
var o;
|
|
72
|
-
const e = (o =
|
|
73
|
-
e && (f =
|
|
72
|
+
const e = (o = s(_)) == null ? void 0 : o.querySelector(`.${u}-move-box`);
|
|
73
|
+
e && (f = ue.create(e, {
|
|
74
74
|
animation: 300,
|
|
75
75
|
handle: `.${u}-item-move:not(.is-disabled)`,
|
|
76
76
|
onStart: (t) => t.item.style.opacity = "0",
|
|
77
77
|
onEnd(t) {
|
|
78
78
|
if (t.oldIndex == null || t.newIndex == null) return;
|
|
79
|
-
const [
|
|
80
|
-
l.selectedColumns.splice(t.newIndex, 0,
|
|
79
|
+
const [n] = l.selectedColumns.splice(t.oldIndex, 1);
|
|
80
|
+
l.selectedColumns.splice(t.newIndex, 0, n), t.item.style.opacity = "1";
|
|
81
81
|
}
|
|
82
82
|
}));
|
|
83
83
|
}
|
|
84
|
-
|
|
84
|
+
T(
|
|
85
85
|
() => l.checkedFields,
|
|
86
86
|
(e) => {
|
|
87
87
|
const o = new Set(e);
|
|
88
|
-
l.selectedColumns = l.selectedColumns.filter((
|
|
89
|
-
const t = new Set(l.selectedColumns.map((
|
|
88
|
+
l.selectedColumns = l.selectedColumns.filter((n) => o.has(n.field || ""));
|
|
89
|
+
const t = new Set(l.selectedColumns.map((n) => n.field || ""));
|
|
90
90
|
l.selectedColumns.push(
|
|
91
|
-
...l.allColumns.filter((
|
|
91
|
+
...l.allColumns.filter((n) => o.has(n.field || "") && !t.has(n.field || ""))
|
|
92
92
|
);
|
|
93
93
|
},
|
|
94
94
|
{ deep: !0 }
|
|
95
|
-
),
|
|
95
|
+
), T(
|
|
96
96
|
() => {
|
|
97
97
|
var e;
|
|
98
98
|
return (e = x.getVisible) == null ? void 0 : e.value;
|
|
@@ -101,72 +101,73 @@ const ue = { class: "flex-1" }, me = { class: "cb flex items-center" }, fe = { c
|
|
|
101
101
|
e || (g && clearTimeout(g), f == null || f.destroy(), f = null, Object.assign(l, { allColumns: [], checkedFields: [], selectedColumns: [] }));
|
|
102
102
|
}
|
|
103
103
|
);
|
|
104
|
-
function
|
|
104
|
+
function K() {
|
|
105
105
|
var e, o;
|
|
106
106
|
k.value ? (e = r.openExport) == null || e.call(r, !0) : (o = r.openColumn) == null || o.call(r, !0);
|
|
107
107
|
}
|
|
108
|
-
return
|
|
108
|
+
return N({
|
|
109
109
|
handleSubmit: y,
|
|
110
|
-
openModal:
|
|
110
|
+
openModal: H,
|
|
111
111
|
setModalProps(e) {
|
|
112
112
|
x.setModalProps(e);
|
|
113
113
|
}
|
|
114
|
-
}), (e, o) => (m(), E(
|
|
114
|
+
}), (e, o) => (m(), E(s(D), {
|
|
115
115
|
width: "720",
|
|
116
|
-
class: b(
|
|
116
|
+
class: b(s(u)),
|
|
117
117
|
onOk: y
|
|
118
|
-
}, {
|
|
119
|
-
beforeFooter:
|
|
120
|
-
|
|
121
|
-
a(
|
|
122
|
-
default:
|
|
123
|
-
|
|
118
|
+
}, ee({
|
|
119
|
+
beforeFooter: d(() => [
|
|
120
|
+
c("div", ke, [
|
|
121
|
+
a(s(ie), { onClick: K }, {
|
|
122
|
+
default: d(() => [...o[1] || (o[1] = [
|
|
123
|
+
F("重置", -1)
|
|
124
124
|
])]),
|
|
125
125
|
_: 1
|
|
126
|
-
})
|
|
126
|
+
}),
|
|
127
|
+
V(e.$slots, "beforeFooter")
|
|
127
128
|
])
|
|
128
129
|
]),
|
|
129
|
-
default:
|
|
130
|
-
|
|
130
|
+
default: d(() => [
|
|
131
|
+
c("div", {
|
|
131
132
|
ref_key: "contentRef",
|
|
132
|
-
ref:
|
|
133
|
+
ref: _,
|
|
133
134
|
class: "flex h-[400px]"
|
|
134
135
|
}, [
|
|
135
|
-
|
|
136
|
-
a(
|
|
137
|
-
default:
|
|
138
|
-
|
|
139
|
-
a(
|
|
140
|
-
"model-value":
|
|
136
|
+
c("div", fe, [
|
|
137
|
+
a(s(I), { class: "h-full px-24px py-12px" }, {
|
|
138
|
+
default: d(() => [
|
|
139
|
+
c("div", pe, [
|
|
140
|
+
a(s(R), {
|
|
141
|
+
"model-value": P.value,
|
|
141
142
|
class: "checkbox-all",
|
|
142
|
-
indeterminate:
|
|
143
|
-
onChange:
|
|
143
|
+
indeterminate: q.value,
|
|
144
|
+
onChange: G
|
|
144
145
|
}, {
|
|
145
|
-
default:
|
|
146
|
-
|
|
146
|
+
default: d(() => [
|
|
147
|
+
c("span", he, " 全部(" + h(l.checkedFields.length) + "/" + h(p.value.length) + ") ", 1)
|
|
147
148
|
]),
|
|
148
149
|
_: 1
|
|
149
150
|
}, 8, ["model-value", "indeterminate"])
|
|
150
151
|
]),
|
|
151
|
-
a(
|
|
152
|
+
a(s(ce), {
|
|
152
153
|
modelValue: l.checkedFields,
|
|
153
154
|
"onUpdate:modelValue": o[0] || (o[0] = (t) => l.checkedFields = t),
|
|
154
155
|
class: "mb-10px w-full"
|
|
155
156
|
}, {
|
|
156
|
-
default:
|
|
157
|
-
(m(!0), v(M, null,
|
|
157
|
+
default: d(() => [
|
|
158
|
+
(m(!0), v(M, null, $(p.value, (t) => (m(), E(s(R), {
|
|
158
159
|
key: t.field,
|
|
159
160
|
value: t.field,
|
|
160
161
|
disabled: t.disabled
|
|
161
162
|
}, {
|
|
162
|
-
default:
|
|
163
|
-
a(
|
|
163
|
+
default: d(() => [
|
|
164
|
+
a(s(ae), {
|
|
164
165
|
"show-after": 400,
|
|
165
166
|
content: t.title || "",
|
|
166
167
|
placement: "top"
|
|
167
168
|
}, {
|
|
168
|
-
default:
|
|
169
|
-
|
|
169
|
+
default: d(() => [
|
|
170
|
+
F(h(t.title || ""), 1)
|
|
170
171
|
]),
|
|
171
172
|
_: 2
|
|
172
173
|
}, 1032, ["content"])
|
|
@@ -180,54 +181,54 @@ const ue = { class: "flex-1" }, me = { class: "cb flex items-center" }, fe = { c
|
|
|
180
181
|
_: 1
|
|
181
182
|
})
|
|
182
183
|
]),
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
184
|
+
c("div", xe, [
|
|
185
|
+
c("div", Ce, [
|
|
186
|
+
c("span", null, "已选 " + h(l.selectedColumns.length) + " 列", 1),
|
|
187
|
+
c("span", {
|
|
187
188
|
class: "cursor-pointer text-(--el-color-primary)",
|
|
188
|
-
onClick:
|
|
189
|
+
onClick: U
|
|
189
190
|
}, "清空")
|
|
190
191
|
]),
|
|
191
|
-
a(
|
|
192
|
-
default:
|
|
193
|
-
|
|
194
|
-
class: b([`${
|
|
192
|
+
a(s(I), { class: "flex-1" }, {
|
|
193
|
+
default: d(() => [
|
|
194
|
+
c("div", {
|
|
195
|
+
class: b([`${s(u)}-move-box`, "px-7px"])
|
|
195
196
|
}, [
|
|
196
|
-
(m(!0), v(M, null,
|
|
197
|
+
(m(!0), v(M, null, $(l.selectedColumns, (t) => (m(), v("div", {
|
|
197
198
|
key: t.field,
|
|
198
199
|
class: b([
|
|
199
|
-
`${
|
|
200
|
+
`${s(u)}-item-move`,
|
|
200
201
|
"flex h-36px items-center justify-between pr-12px py-2 cursor-pointer"
|
|
201
202
|
])
|
|
202
203
|
}, [
|
|
203
|
-
|
|
204
|
-
a(
|
|
204
|
+
c("div", be, [
|
|
205
|
+
a(s(B), {
|
|
205
206
|
class: "shrink-0 text-[var(--el-text-color-secondary)]",
|
|
206
207
|
size: 14,
|
|
207
|
-
icon:
|
|
208
|
+
icon: s(se),
|
|
208
209
|
"is-custom-svg": ""
|
|
209
210
|
}, null, 8, ["icon"]),
|
|
210
|
-
a(
|
|
211
|
+
a(s(ne), {
|
|
211
212
|
"tool-tip": !1,
|
|
212
213
|
class: "ml-1"
|
|
213
214
|
}, {
|
|
214
|
-
default:
|
|
215
|
-
|
|
215
|
+
default: d(() => [
|
|
216
|
+
F(h(t.title || ""), 1)
|
|
216
217
|
]),
|
|
217
218
|
_: 2
|
|
218
219
|
}, 1024)
|
|
219
220
|
]),
|
|
220
|
-
l.disabledColumnField.includes(t.field) ?
|
|
221
|
+
l.disabledColumnField.includes(t.field) ? le("", !0) : (m(), v("span", {
|
|
221
222
|
key: 0,
|
|
222
|
-
class: b(`${
|
|
223
|
-
onClick:
|
|
223
|
+
class: b(`${s(u)}-action-btn`),
|
|
224
|
+
onClick: te((n) => L(t.field), ["stop"])
|
|
224
225
|
}, [
|
|
225
|
-
a(
|
|
226
|
+
a(s(B), {
|
|
226
227
|
class: "text-[var(--el-text-color-secondary)]",
|
|
227
228
|
size: 12,
|
|
228
|
-
"icon-font":
|
|
229
|
+
"icon-font": s(oe)
|
|
229
230
|
}, null, 8, ["icon-font"])
|
|
230
|
-
], 10,
|
|
231
|
+
], 10, ve))
|
|
231
232
|
], 2))), 128))
|
|
232
233
|
], 2)
|
|
233
234
|
]),
|
|
@@ -236,10 +237,18 @@ const ue = { class: "flex-1" }, me = { class: "cb flex items-center" }, fe = { c
|
|
|
236
237
|
])
|
|
237
238
|
], 512)
|
|
238
239
|
]),
|
|
239
|
-
_:
|
|
240
|
-
},
|
|
240
|
+
_: 2
|
|
241
|
+
}, [
|
|
242
|
+
e.$slots.title ? {
|
|
243
|
+
name: "header",
|
|
244
|
+
fn: d(() => [
|
|
245
|
+
V(e.$slots, "title")
|
|
246
|
+
]),
|
|
247
|
+
key: "0"
|
|
248
|
+
} : void 0
|
|
249
|
+
]), 1032, ["class"]));
|
|
241
250
|
}
|
|
242
251
|
});
|
|
243
252
|
export {
|
|
244
|
-
|
|
253
|
+
Le as default
|
|
245
254
|
};
|