@cmstops/pro-compo 0.3.31 → 0.3.33
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/index.css +212 -0
- package/dist/index.min.css +1 -1
- package/es/hooks/useAttachement.d.ts +20 -0
- package/es/hooks/useAttachement.js +95 -0
- package/es/hooks/useSelection.d.ts +23 -0
- package/es/hooks/useSelection.js +59 -0
- package/es/index.css +212 -0
- package/es/index.d.ts +2 -0
- package/es/index.js +2 -0
- package/es/index.less +2 -0
- package/es/selectResourceModal/component.d.ts +0 -0
- package/es/selectResourceModal/component.js +211 -0
- package/es/selectResourceModal/components/ListContent/index.d.ts +0 -0
- package/es/selectResourceModal/components/ListContent/index.js +92 -0
- package/es/selectResourceModal/components/ListFilter/index.d.ts +0 -0
- package/es/selectResourceModal/components/ListFilter/index.js +259 -0
- package/es/selectResourceModal/components/ListFilter/scripts/api.d.ts +1 -0
- package/es/selectResourceModal/components/ListFilter/scripts/api.js +9 -0
- package/es/selectResourceModal/components/ListSelected/index.d.ts +0 -0
- package/es/selectResourceModal/components/ListSelected/index.js +91 -0
- package/es/selectResourceModal/index.d.ts +2 -0
- package/es/selectResourceModal/index.js +7 -0
- package/es/selectResourceModal/style/css.js +1 -0
- package/es/selectResourceModal/style/index.css +159 -0
- package/es/selectResourceModal/style/index.d.ts +1 -0
- package/es/selectResourceModal/style/index.js +1 -0
- package/es/selectResourceModal/style/index.less +43 -0
- package/es/selectResourceModal/style/listContent.less +67 -0
- package/es/selectResourceModal/style/listFilter.less +17 -0
- package/es/selectResourceModal/style/listSelected.less +67 -0
- package/es/thumbCard/component.d.ts +0 -0
- package/es/thumbCard/component.js +114 -0
- package/es/thumbCard/index.d.ts +2 -0
- package/es/thumbCard/index.js +7 -0
- package/es/thumbCard/style/css.js +1 -0
- package/es/thumbCard/style/index.css +53 -0
- package/es/thumbCard/style/index.d.ts +1 -0
- package/es/thumbCard/style/index.js +1 -0
- package/es/thumbCard/style/index.less +70 -0
- package/es/utils/typeMap.d.ts +19 -0
- package/es/utils/typeMap.js +17 -1
- package/lib/hooks/useAttachement.js +100 -0
- package/lib/hooks/useSelection.js +60 -0
- package/lib/index.css +212 -0
- package/lib/index.js +4 -0
- package/lib/index.less +2 -0
- package/lib/selectResourceModal/component.js +212 -0
- package/lib/selectResourceModal/components/ListContent/index.js +93 -0
- package/lib/selectResourceModal/components/ListFilter/index.js +260 -0
- package/lib/selectResourceModal/components/ListFilter/scripts/api.js +11 -0
- package/lib/selectResourceModal/components/ListSelected/index.js +92 -0
- package/lib/selectResourceModal/index.js +8 -0
- package/lib/selectResourceModal/style/css.js +2 -0
- package/lib/selectResourceModal/style/index.css +159 -0
- package/lib/selectResourceModal/style/index.js +2 -0
- package/lib/selectResourceModal/style/index.less +43 -0
- package/lib/selectResourceModal/style/listContent.less +67 -0
- package/lib/selectResourceModal/style/listFilter.less +17 -0
- package/lib/selectResourceModal/style/listSelected.less +67 -0
- package/lib/thumbCard/component.js +115 -0
- package/lib/thumbCard/index.js +8 -0
- package/lib/thumbCard/style/css.js +2 -0
- package/lib/thumbCard/style/index.css +53 -0
- package/lib/thumbCard/style/index.js +2 -0
- package/lib/thumbCard/style/index.less +70 -0
- package/lib/utils/typeMap.js +20 -0
- package/package.json +2 -2
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, createElementVNode, createVNode, unref, toDisplayString, createCommentVNode, createBlock } from "vue";
|
|
2
|
+
import { Spin } from "@arco-design/web-vue";
|
|
3
|
+
import emptyData from "../../../emptyData/index.js";
|
|
4
|
+
import thumbCard from "../../../thumbCard/index.js";
|
|
5
|
+
const _hoisted_1 = { class: "card-list-wrapper" };
|
|
6
|
+
const _hoisted_2 = { class: "card-wrapper" };
|
|
7
|
+
const _hoisted_3 = { class: "card-alias" };
|
|
8
|
+
const _hoisted_4 = ["onClick"];
|
|
9
|
+
const _hoisted_5 = {
|
|
10
|
+
key: 0,
|
|
11
|
+
class: "check-box active"
|
|
12
|
+
};
|
|
13
|
+
const _hoisted_6 = {
|
|
14
|
+
key: 1,
|
|
15
|
+
class: "check-box"
|
|
16
|
+
};
|
|
17
|
+
const _sfc_main = defineComponent({
|
|
18
|
+
__name: "index",
|
|
19
|
+
props: {
|
|
20
|
+
loading: { type: Boolean },
|
|
21
|
+
list: {},
|
|
22
|
+
selectKeys: {},
|
|
23
|
+
disable: { type: Boolean }
|
|
24
|
+
},
|
|
25
|
+
emits: ["select", "select-one"],
|
|
26
|
+
setup(__props, { emit: __emit }) {
|
|
27
|
+
const props = __props;
|
|
28
|
+
const emits = __emit;
|
|
29
|
+
const handlersKey = computed(() => {
|
|
30
|
+
var _a;
|
|
31
|
+
if (((_a = props.selectKeys) == null ? void 0 : _a.length) > 0 || props.disable)
|
|
32
|
+
return [];
|
|
33
|
+
return [{ label: "\u9009\u7528", key: "select" }];
|
|
34
|
+
});
|
|
35
|
+
function handleOption(params) {
|
|
36
|
+
const { key, item } = params;
|
|
37
|
+
if (key === "select") {
|
|
38
|
+
emits("select-one", item);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
function handleCheck(params) {
|
|
42
|
+
emits("select", params);
|
|
43
|
+
}
|
|
44
|
+
const selectedOrder = computed(() => {
|
|
45
|
+
var _a;
|
|
46
|
+
const result = {};
|
|
47
|
+
(_a = props.selectKeys) == null ? void 0 : _a.forEach((key, index) => {
|
|
48
|
+
result[key] = index + 1;
|
|
49
|
+
});
|
|
50
|
+
return result;
|
|
51
|
+
});
|
|
52
|
+
return (_ctx, _cache) => {
|
|
53
|
+
var _a, _b;
|
|
54
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
55
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item) => {
|
|
56
|
+
return openBlock(), createElementBlock("div", {
|
|
57
|
+
key: item.id,
|
|
58
|
+
class: "card-wrapper-image"
|
|
59
|
+
}, [
|
|
60
|
+
createElementVNode("div", _hoisted_2, [
|
|
61
|
+
createVNode(unref(thumbCard), {
|
|
62
|
+
url: item.url,
|
|
63
|
+
thumb: item.thumb,
|
|
64
|
+
catalog: item.catalog,
|
|
65
|
+
meta: item,
|
|
66
|
+
"handlers-key": handlersKey.value,
|
|
67
|
+
onHandle: handleOption
|
|
68
|
+
}, null, 8, ["url", "thumb", "catalog", "meta", "handlers-key"])
|
|
69
|
+
]),
|
|
70
|
+
createElementVNode("div", _hoisted_3, toDisplayString(item.alias), 1),
|
|
71
|
+
createElementVNode("div", {
|
|
72
|
+
class: "check-box-wrapper",
|
|
73
|
+
onClick: () => handleCheck(item)
|
|
74
|
+
}, [
|
|
75
|
+
selectedOrder.value[item.id] ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(selectedOrder.value[item.id]), 1)) : !_ctx.disable ? (openBlock(), createElementBlock("div", _hoisted_6)) : createCommentVNode("v-if", true)
|
|
76
|
+
], 8, _hoisted_4)
|
|
77
|
+
]);
|
|
78
|
+
}), 128)),
|
|
79
|
+
createCommentVNode(" \u7A7A\u72B6\u6001 "),
|
|
80
|
+
((_a = _ctx.list) == null ? void 0 : _a.length) === 0 && _ctx.loading ? (openBlock(), createBlock(unref(Spin), {
|
|
81
|
+
key: 0,
|
|
82
|
+
loading: true
|
|
83
|
+
})) : !((_b = _ctx.list) == null ? void 0 : _b.length) ? (openBlock(), createBlock(unref(emptyData), {
|
|
84
|
+
key: 1,
|
|
85
|
+
type: "empty",
|
|
86
|
+
customTip: "\u6682\u65E0\u6570\u636E"
|
|
87
|
+
})) : createCommentVNode("v-if", true)
|
|
88
|
+
]);
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
export { _sfc_main as default };
|
|
File without changes
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
import { defineComponent, inject, computed, ref, watch, onMounted, openBlock, createElementBlock, createElementVNode, createCommentVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString, Fragment, renderList, createBlock } from "vue";
|
|
2
|
+
import { Input, Dropdown, Doption, Button, Select, Option, RangePicker } from "@arco-design/web-vue";
|
|
3
|
+
import { IconUpload } from "@arco-design/web-vue/es/icon";
|
|
4
|
+
import useSelection from "../../../hooks/useSelection.js";
|
|
5
|
+
import { RESOURCE_SOURCE_OPTIONS, RESOURCE_CATALOG_OPTIONS } from "../../../utils/typeMap.js";
|
|
6
|
+
import { getAccountList } from "./scripts/api.js";
|
|
7
|
+
const _hoisted_1 = { class: "list-filter-wrapper" };
|
|
8
|
+
const _hoisted_2 = { class: "filter-list" };
|
|
9
|
+
const _hoisted_3 = { style: { "width": "200px" } };
|
|
10
|
+
const _hoisted_4 = { class: "filter-item" };
|
|
11
|
+
const _hoisted_5 = { class: "filter-item" };
|
|
12
|
+
const _hoisted_6 = {
|
|
13
|
+
key: 0,
|
|
14
|
+
class: "filter-item"
|
|
15
|
+
};
|
|
16
|
+
const _hoisted_7 = { class: "filter-extra" };
|
|
17
|
+
const _sfc_main = defineComponent({
|
|
18
|
+
__name: "index",
|
|
19
|
+
props: {
|
|
20
|
+
disableUploadBy: { type: Boolean }
|
|
21
|
+
},
|
|
22
|
+
emits: ["upload", "change"],
|
|
23
|
+
setup(__props, { emit: __emit }) {
|
|
24
|
+
const props = __props;
|
|
25
|
+
const emits = __emit;
|
|
26
|
+
const userInfo = inject("userInfo");
|
|
27
|
+
const baseAPI = inject("baseAPI");
|
|
28
|
+
const domainId = computed(() => userInfo == null ? void 0 : userInfo.value.domain_id);
|
|
29
|
+
const { options, loading, load, loadMore, handleSearch } = useSelection({
|
|
30
|
+
labelStr: "alias",
|
|
31
|
+
valueStr: "id",
|
|
32
|
+
func: async ({ keyword, ...pageInfo }) => {
|
|
33
|
+
if (!baseAPI)
|
|
34
|
+
return Promise.reject(new Error("baseAPI \u4E0D\u5B58\u5728"));
|
|
35
|
+
if (!domainId.value)
|
|
36
|
+
return Promise.reject(new Error("domainId \u4E0D\u5B58\u5728"));
|
|
37
|
+
const { code, message } = await getAccountList(baseAPI, domainId.value, {
|
|
38
|
+
...pageInfo,
|
|
39
|
+
keywords: keyword
|
|
40
|
+
});
|
|
41
|
+
if (code !== 0)
|
|
42
|
+
return Promise.reject(new Error(message));
|
|
43
|
+
return message.users;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
const resourceSource = RESOURCE_SOURCE_OPTIONS;
|
|
47
|
+
const resourceCatalog = RESOURCE_CATALOG_OPTIONS;
|
|
48
|
+
const originFilter = {
|
|
49
|
+
catalog: "",
|
|
50
|
+
source: "",
|
|
51
|
+
create_begin: "",
|
|
52
|
+
create_end: "",
|
|
53
|
+
keyword: "",
|
|
54
|
+
precise_keyword: "",
|
|
55
|
+
upload_by: null
|
|
56
|
+
};
|
|
57
|
+
const filter = ref(JSON.parse(JSON.stringify(originFilter)));
|
|
58
|
+
const handleReset = () => {
|
|
59
|
+
filter.value = JSON.parse(JSON.stringify(originFilter));
|
|
60
|
+
};
|
|
61
|
+
const rangeTime = computed({
|
|
62
|
+
get() {
|
|
63
|
+
return filter.value.create_begin && filter.value.create_end ? [filter.value.create_begin * 1e3, filter.value.create_end * 1e3] : null;
|
|
64
|
+
},
|
|
65
|
+
set(val) {
|
|
66
|
+
if (val) {
|
|
67
|
+
const [start, end] = val;
|
|
68
|
+
filter.value.create_begin = +new Date(start) / 1e3;
|
|
69
|
+
filter.value.create_end = +new Date(end) / 1e3;
|
|
70
|
+
} else {
|
|
71
|
+
filter.value.create_begin = "";
|
|
72
|
+
filter.value.create_end = "";
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
const searchType = ref(0);
|
|
77
|
+
const searchTypeText = computed(() => {
|
|
78
|
+
return searchType.value === 0 ? "\u7CBE\u51C6\u641C" : "\u6A21\u7CCA\u641C";
|
|
79
|
+
});
|
|
80
|
+
const searchInput = computed({
|
|
81
|
+
get() {
|
|
82
|
+
return searchType.value === 0 ? filter.value.precise_keyword : filter.value.keyword;
|
|
83
|
+
},
|
|
84
|
+
set(val) {
|
|
85
|
+
if (searchType.value === 0) {
|
|
86
|
+
filter.value.precise_keyword = val;
|
|
87
|
+
filter.value.keyword = "";
|
|
88
|
+
} else {
|
|
89
|
+
filter.value.keyword = val;
|
|
90
|
+
filter.value.precise_keyword = "";
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
const isEmpty = computed(() => {
|
|
95
|
+
return Object.keys(filter.value).every((key) => {
|
|
96
|
+
return !filter.value[key];
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
watch(
|
|
100
|
+
() => filter.value,
|
|
101
|
+
() => {
|
|
102
|
+
const result = { ...filter.value };
|
|
103
|
+
Object.keys(result).forEach((key) => {
|
|
104
|
+
if (props.disableUploadBy && key === "upload_by")
|
|
105
|
+
delete result[key];
|
|
106
|
+
if (!result[key])
|
|
107
|
+
delete result[key];
|
|
108
|
+
});
|
|
109
|
+
emits("change", result);
|
|
110
|
+
},
|
|
111
|
+
{ deep: true }
|
|
112
|
+
);
|
|
113
|
+
onMounted(() => {
|
|
114
|
+
load();
|
|
115
|
+
});
|
|
116
|
+
return (_ctx, _cache) => {
|
|
117
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
118
|
+
createElementVNode("div", _hoisted_2, [
|
|
119
|
+
createCommentVNode(" \u5173\u952E\u8BCD "),
|
|
120
|
+
createElementVNode("div", _hoisted_3, [
|
|
121
|
+
createVNode(unref(Input), {
|
|
122
|
+
modelValue: searchInput.value,
|
|
123
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchInput.value = $event),
|
|
124
|
+
"allow-clear": "",
|
|
125
|
+
placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD"
|
|
126
|
+
}, {
|
|
127
|
+
prepend: withCtx(() => [
|
|
128
|
+
createVNode(unref(Dropdown), {
|
|
129
|
+
onSelect: _cache[0] || (_cache[0] = (e) => searchType.value = e)
|
|
130
|
+
}, {
|
|
131
|
+
content: withCtx(() => [
|
|
132
|
+
createVNode(unref(Doption), { value: 0 }, {
|
|
133
|
+
default: withCtx(() => [
|
|
134
|
+
createTextVNode("\u7CBE\u51C6\u641C")
|
|
135
|
+
]),
|
|
136
|
+
_: 1
|
|
137
|
+
}),
|
|
138
|
+
createVNode(unref(Doption), { value: 1 }, {
|
|
139
|
+
default: withCtx(() => [
|
|
140
|
+
createTextVNode("\u6A21\u7CCA\u641C")
|
|
141
|
+
]),
|
|
142
|
+
_: 1
|
|
143
|
+
})
|
|
144
|
+
]),
|
|
145
|
+
default: withCtx(() => [
|
|
146
|
+
createVNode(unref(Button), null, {
|
|
147
|
+
default: withCtx(() => [
|
|
148
|
+
createTextVNode(toDisplayString(searchTypeText.value), 1)
|
|
149
|
+
]),
|
|
150
|
+
_: 1
|
|
151
|
+
})
|
|
152
|
+
]),
|
|
153
|
+
_: 1
|
|
154
|
+
})
|
|
155
|
+
]),
|
|
156
|
+
_: 1
|
|
157
|
+
}, 8, ["modelValue"])
|
|
158
|
+
]),
|
|
159
|
+
createCommentVNode(" \u7D20\u6750\u7C7B\u578B "),
|
|
160
|
+
createElementVNode("div", _hoisted_4, [
|
|
161
|
+
createVNode(unref(Select), {
|
|
162
|
+
modelValue: filter.value.catalog,
|
|
163
|
+
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => filter.value.catalog = $event),
|
|
164
|
+
"allow-clear": "",
|
|
165
|
+
placeholder: "\u7C7B\u578B"
|
|
166
|
+
}, {
|
|
167
|
+
default: withCtx(() => [
|
|
168
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(resourceCatalog), (item) => {
|
|
169
|
+
return openBlock(), createBlock(unref(Option), {
|
|
170
|
+
key: item.value,
|
|
171
|
+
label: item.label,
|
|
172
|
+
value: item.value
|
|
173
|
+
}, null, 8, ["label", "value"]);
|
|
174
|
+
}), 128))
|
|
175
|
+
]),
|
|
176
|
+
_: 1
|
|
177
|
+
}, 8, ["modelValue"])
|
|
178
|
+
]),
|
|
179
|
+
createCommentVNode(" \u65F6\u95F4\u8303\u56F4 "),
|
|
180
|
+
createVNode(unref(RangePicker), {
|
|
181
|
+
modelValue: rangeTime.value,
|
|
182
|
+
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rangeTime.value = $event),
|
|
183
|
+
"allow-clear": "",
|
|
184
|
+
style: { "width": "240px" }
|
|
185
|
+
}, null, 8, ["modelValue"]),
|
|
186
|
+
createCommentVNode(" \u7D20\u6750\u4E0A\u4F20\u6765\u6E90 "),
|
|
187
|
+
createElementVNode("div", _hoisted_5, [
|
|
188
|
+
createVNode(unref(Select), {
|
|
189
|
+
modelValue: filter.value.source,
|
|
190
|
+
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => filter.value.source = $event),
|
|
191
|
+
"allow-clear": "",
|
|
192
|
+
placeholder: "\u6765\u6E90"
|
|
193
|
+
}, {
|
|
194
|
+
default: withCtx(() => [
|
|
195
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(resourceSource), (item) => {
|
|
196
|
+
return openBlock(), createBlock(unref(Option), {
|
|
197
|
+
key: item.value,
|
|
198
|
+
label: item.label,
|
|
199
|
+
value: item.value
|
|
200
|
+
}, null, 8, ["label", "value"]);
|
|
201
|
+
}), 128))
|
|
202
|
+
]),
|
|
203
|
+
_: 1
|
|
204
|
+
}, 8, ["modelValue"])
|
|
205
|
+
]),
|
|
206
|
+
createCommentVNode(" \u7D20\u6750\u4E0A\u4F20\u4EBA "),
|
|
207
|
+
!_ctx.disableUploadBy ? (openBlock(), createElementBlock("div", _hoisted_6, [
|
|
208
|
+
createVNode(unref(Select), {
|
|
209
|
+
modelValue: filter.value.upload_by,
|
|
210
|
+
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => filter.value.upload_by = $event),
|
|
211
|
+
"allow-clear": "",
|
|
212
|
+
placeholder: "\u4E0A\u4F20\u4EBA",
|
|
213
|
+
loading: unref(loading),
|
|
214
|
+
"allow-search": "",
|
|
215
|
+
onSearch: unref(handleSearch),
|
|
216
|
+
onDropdownReachBottom: unref(loadMore)
|
|
217
|
+
}, {
|
|
218
|
+
default: withCtx(() => [
|
|
219
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(options), (item) => {
|
|
220
|
+
return openBlock(), createBlock(unref(Option), {
|
|
221
|
+
key: item.id,
|
|
222
|
+
label: item.label,
|
|
223
|
+
value: item.value
|
|
224
|
+
}, null, 8, ["label", "value"]);
|
|
225
|
+
}), 128))
|
|
226
|
+
]),
|
|
227
|
+
_: 1
|
|
228
|
+
}, 8, ["modelValue", "loading", "onSearch", "onDropdownReachBottom"])
|
|
229
|
+
])) : createCommentVNode("v-if", true),
|
|
230
|
+
!isEmpty.value ? (openBlock(), createBlock(unref(Button), {
|
|
231
|
+
key: 1,
|
|
232
|
+
type: "text",
|
|
233
|
+
onClick: handleReset
|
|
234
|
+
}, {
|
|
235
|
+
default: withCtx(() => [
|
|
236
|
+
createTextVNode("\u91CD\u7F6E")
|
|
237
|
+
]),
|
|
238
|
+
_: 1
|
|
239
|
+
})) : createCommentVNode("v-if", true)
|
|
240
|
+
]),
|
|
241
|
+
createElementVNode("div", _hoisted_7, [
|
|
242
|
+
createVNode(unref(Button), {
|
|
243
|
+
type: "primary",
|
|
244
|
+
onClick: _cache[6] || (_cache[6] = ($event) => emits("upload"))
|
|
245
|
+
}, {
|
|
246
|
+
icon: withCtx(() => [
|
|
247
|
+
createVNode(unref(IconUpload))
|
|
248
|
+
]),
|
|
249
|
+
default: withCtx(() => [
|
|
250
|
+
createTextVNode(" \u4E0A\u4F20 ")
|
|
251
|
+
]),
|
|
252
|
+
_: 1
|
|
253
|
+
})
|
|
254
|
+
])
|
|
255
|
+
]);
|
|
256
|
+
};
|
|
257
|
+
}
|
|
258
|
+
});
|
|
259
|
+
export { _sfc_main as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getAccountList(BASE_API: string, id: number, query: any): import("axios").AxiosPromise<any>;
|
|
File without changes
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { defineComponent, ref, openBlock, createElementBlock, toDisplayString, createCommentVNode, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, createTextVNode } from "vue";
|
|
2
|
+
import { Popover, Image, Button, Link } from "@arco-design/web-vue";
|
|
3
|
+
import { IconClose } from "@arco-design/web-vue/es/icon";
|
|
4
|
+
const _hoisted_1 = { class: "list-selected-wrapper" };
|
|
5
|
+
const _hoisted_2 = { key: 0 };
|
|
6
|
+
const _hoisted_3 = { class: "list-panel-header" };
|
|
7
|
+
const _hoisted_4 = { class: "header-options" };
|
|
8
|
+
const _hoisted_5 = { class: "list-selected-record" };
|
|
9
|
+
const _hoisted_6 = { class: "item-thumb" };
|
|
10
|
+
const _hoisted_7 = { class: "item-alias" };
|
|
11
|
+
const _sfc_main = defineComponent({
|
|
12
|
+
__name: "index",
|
|
13
|
+
props: {
|
|
14
|
+
selected: {},
|
|
15
|
+
maxcount: {}
|
|
16
|
+
},
|
|
17
|
+
emits: ["remove", "clear"],
|
|
18
|
+
setup(__props, { emit: __emit }) {
|
|
19
|
+
const emits = __emit;
|
|
20
|
+
const visible = ref(false);
|
|
21
|
+
return (_ctx, _cache) => {
|
|
22
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
23
|
+
_ctx.maxcount ? (openBlock(), createElementBlock("span", _hoisted_2, "\u6700\u591A\u9009\u62E9 " + toDisplayString(_ctx.maxcount) + " \u4E2A\u7D20\u6750\uFF0C ", 1)) : createCommentVNode("v-if", true),
|
|
24
|
+
createVNode(unref(Popover), {
|
|
25
|
+
"popup-visible": visible.value,
|
|
26
|
+
"onUpdate:popupVisible": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
|
|
27
|
+
trigger: "click",
|
|
28
|
+
"content-class": "list-panel-wrapper"
|
|
29
|
+
}, {
|
|
30
|
+
content: withCtx(() => [
|
|
31
|
+
createCommentVNode(" header "),
|
|
32
|
+
createElementVNode("div", _hoisted_3, [
|
|
33
|
+
createElementVNode("div", null, "\u5DF2\u9009\u62E9 " + toDisplayString(_ctx.selected.length) + " \u4E2A\u7D20\u6750", 1),
|
|
34
|
+
createElementVNode("div", _hoisted_4, [
|
|
35
|
+
createElementVNode("div", {
|
|
36
|
+
onClick: _cache[0] || (_cache[0] = ($event) => emits("clear"))
|
|
37
|
+
}, " \u6E05\u9664 "),
|
|
38
|
+
createElementVNode("div", {
|
|
39
|
+
onClick: _cache[1] || (_cache[1] = ($event) => visible.value = false)
|
|
40
|
+
}, [
|
|
41
|
+
createVNode(unref(IconClose), { size: "14" })
|
|
42
|
+
])
|
|
43
|
+
])
|
|
44
|
+
]),
|
|
45
|
+
createCommentVNode(" content "),
|
|
46
|
+
createElementVNode("div", _hoisted_5, [
|
|
47
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selected, (item) => {
|
|
48
|
+
return openBlock(), createElementBlock("div", {
|
|
49
|
+
key: item.id,
|
|
50
|
+
class: "list-selected-item"
|
|
51
|
+
}, [
|
|
52
|
+
createElementVNode("div", _hoisted_6, [
|
|
53
|
+
["image", "video"].includes(item.catalog) ? (openBlock(), createBlock(unref(Image), {
|
|
54
|
+
key: 0,
|
|
55
|
+
width: "100%",
|
|
56
|
+
height: "100%",
|
|
57
|
+
src: item.thumb || item.url
|
|
58
|
+
}, null, 8, ["src"])) : createCommentVNode("v-if", true),
|
|
59
|
+
["audio"].includes(item.catalog) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
60
|
+
createTextVNode(" \u97F3\u9891 ")
|
|
61
|
+
], 64)) : createCommentVNode("v-if", true)
|
|
62
|
+
]),
|
|
63
|
+
createElementVNode("div", _hoisted_7, toDisplayString(item.alias), 1),
|
|
64
|
+
createVNode(unref(Button), {
|
|
65
|
+
type: "text",
|
|
66
|
+
onClick: ($event) => emits("remove", item)
|
|
67
|
+
}, {
|
|
68
|
+
icon: withCtx(() => [
|
|
69
|
+
createVNode(unref(IconClose))
|
|
70
|
+
]),
|
|
71
|
+
_: 2
|
|
72
|
+
}, 1032, ["onClick"])
|
|
73
|
+
]);
|
|
74
|
+
}), 128))
|
|
75
|
+
])
|
|
76
|
+
]),
|
|
77
|
+
default: withCtx(() => [
|
|
78
|
+
createVNode(unref(Link), null, {
|
|
79
|
+
default: withCtx(() => [
|
|
80
|
+
createTextVNode("\u5DF2\u9009\u62E9 " + toDisplayString(_ctx.selected.length) + " \u4E2A\u7D20\u6750", 1)
|
|
81
|
+
]),
|
|
82
|
+
_: 1
|
|
83
|
+
})
|
|
84
|
+
]),
|
|
85
|
+
_: 1
|
|
86
|
+
}, 8, ["popup-visible"])
|
|
87
|
+
]);
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
export { _sfc_main as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./index.css";
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
.card-list-wrapper {
|
|
2
|
+
display: grid;
|
|
3
|
+
grid-gap: 20px;
|
|
4
|
+
grid-template-columns: repeat(4, 1fr);
|
|
5
|
+
}
|
|
6
|
+
.card-list-wrapper .card-wrapper-image {
|
|
7
|
+
position: relative;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
}
|
|
10
|
+
.card-list-wrapper .card-wrapper-image .card-wrapper {
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
aspect-ratio: 4 / 3;
|
|
13
|
+
}
|
|
14
|
+
.card-list-wrapper .card-wrapper-image .card-alias {
|
|
15
|
+
width: 100%;
|
|
16
|
+
margin-top: 6px;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
color: #3d3d3d;
|
|
19
|
+
font-size: 14px;
|
|
20
|
+
line-height: 22px;
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
text-overflow: ellipsis;
|
|
23
|
+
}
|
|
24
|
+
.card-list-wrapper .card-wrapper-image:hover .check-box-wrapper .check-box,
|
|
25
|
+
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box.active {
|
|
26
|
+
opacity: 1;
|
|
27
|
+
}
|
|
28
|
+
.card-list-wrapper .card-wrapper-image .check-box-wrapper {
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 8px;
|
|
31
|
+
left: 8px;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
}
|
|
34
|
+
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box {
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
width: 22px;
|
|
37
|
+
height: 22px;
|
|
38
|
+
font-size: 14px;
|
|
39
|
+
line-height: 22px;
|
|
40
|
+
text-align: center;
|
|
41
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
42
|
+
border: 1px solid white;
|
|
43
|
+
border-radius: 50%;
|
|
44
|
+
opacity: 0;
|
|
45
|
+
transition: all 0.3s ease-in-out;
|
|
46
|
+
}
|
|
47
|
+
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box::selection {
|
|
48
|
+
display: none;
|
|
49
|
+
}
|
|
50
|
+
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box:hover {
|
|
51
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
52
|
+
}
|
|
53
|
+
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box.active {
|
|
54
|
+
color: white;
|
|
55
|
+
background-color: #165dff;
|
|
56
|
+
border-color: #165dff;
|
|
57
|
+
}
|
|
58
|
+
.list-filter-wrapper {
|
|
59
|
+
display: flex;
|
|
60
|
+
justify-content: space-between;
|
|
61
|
+
}
|
|
62
|
+
.list-filter-wrapper .filter-list {
|
|
63
|
+
display: flex;
|
|
64
|
+
gap: 10px;
|
|
65
|
+
}
|
|
66
|
+
.list-filter-wrapper .filter-list .filter-item {
|
|
67
|
+
width: 100px;
|
|
68
|
+
}
|
|
69
|
+
.list-filter-wrapper .arco-input-prepend {
|
|
70
|
+
padding: 0;
|
|
71
|
+
}
|
|
72
|
+
.list-panel-wrapper {
|
|
73
|
+
width: 420px;
|
|
74
|
+
max-height: 600px;
|
|
75
|
+
padding: 0 !important;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
border: none;
|
|
78
|
+
border-radius: 4px;
|
|
79
|
+
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
|
|
80
|
+
}
|
|
81
|
+
.list-panel-wrapper * {
|
|
82
|
+
user-select: none;
|
|
83
|
+
}
|
|
84
|
+
.list-panel-wrapper *::selection {
|
|
85
|
+
display: none;
|
|
86
|
+
}
|
|
87
|
+
.list-panel-wrapper .arco-popover-content {
|
|
88
|
+
margin-top: 0;
|
|
89
|
+
}
|
|
90
|
+
.list-panel-wrapper .list-panel-header {
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
justify-content: space-between;
|
|
94
|
+
padding: 11px 15px;
|
|
95
|
+
color: white;
|
|
96
|
+
font-weight: 500;
|
|
97
|
+
background-color: #165dff;
|
|
98
|
+
}
|
|
99
|
+
.list-panel-wrapper .list-panel-header .header-options {
|
|
100
|
+
display: flex;
|
|
101
|
+
gap: 12px;
|
|
102
|
+
align-items: center;
|
|
103
|
+
}
|
|
104
|
+
.list-panel-wrapper .list-panel-header .header-options div {
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
}
|
|
107
|
+
.list-panel-wrapper .list-selected-record {
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: column;
|
|
110
|
+
}
|
|
111
|
+
.list-panel-wrapper .list-selected-record .list-selected-item {
|
|
112
|
+
display: flex;
|
|
113
|
+
gap: 12px;
|
|
114
|
+
align-items: center;
|
|
115
|
+
padding: 9px 16px;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
}
|
|
118
|
+
.list-panel-wrapper .list-selected-record .list-selected-item .item-thumb {
|
|
119
|
+
width: 50px;
|
|
120
|
+
height: 38px;
|
|
121
|
+
overflow: hidden;
|
|
122
|
+
}
|
|
123
|
+
.list-panel-wrapper .list-selected-record .list-selected-item .item-alias {
|
|
124
|
+
flex: 1;
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
white-space: nowrap;
|
|
127
|
+
text-overflow: ellipsis;
|
|
128
|
+
}
|
|
129
|
+
.resource-select-container {
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
gap: 10px;
|
|
133
|
+
box-sizing: border-box;
|
|
134
|
+
height: 100%;
|
|
135
|
+
}
|
|
136
|
+
.resource-select-container .resource-select-filter,
|
|
137
|
+
.resource-select-container .resource-select-content,
|
|
138
|
+
.resource-select-container .resource-select-footer {
|
|
139
|
+
padding: 0 16px 0;
|
|
140
|
+
}
|
|
141
|
+
.resource-select-container .resource-select-header .arco-tabs-nav::before {
|
|
142
|
+
display: none;
|
|
143
|
+
}
|
|
144
|
+
.resource-select-container .resource-select-header .arco-tabs-content {
|
|
145
|
+
display: none !important;
|
|
146
|
+
}
|
|
147
|
+
.resource-select-container .resource-select-content {
|
|
148
|
+
flex: 1;
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
}
|
|
151
|
+
.resource-select-container .resource-select-footer {
|
|
152
|
+
display: flex;
|
|
153
|
+
justify-content: space-between;
|
|
154
|
+
}
|
|
155
|
+
.resource-select-container .resource-select-footer .footer-right {
|
|
156
|
+
display: flex;
|
|
157
|
+
gap: 10px;
|
|
158
|
+
align-items: center;
|
|
159
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './index.less';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./index.less";
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@import './listContent.less';
|
|
2
|
+
@import './listFilter.less';
|
|
3
|
+
@import './listSelected.less';
|
|
4
|
+
|
|
5
|
+
.resource-select-container {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
gap: 10px;
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
height: 100%;
|
|
11
|
+
|
|
12
|
+
.resource-select-filter,
|
|
13
|
+
.resource-select-content,
|
|
14
|
+
.resource-select-footer {
|
|
15
|
+
padding: 0 16px 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.resource-select-header {
|
|
19
|
+
.arco-tabs-nav::before {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.arco-tabs-content {
|
|
24
|
+
display: none !important;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.resource-select-content {
|
|
29
|
+
flex: 1;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.resource-select-footer {
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: space-between;
|
|
36
|
+
|
|
37
|
+
.footer-right {
|
|
38
|
+
display: flex;
|
|
39
|
+
gap: 10px;
|
|
40
|
+
align-items: center;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|