@cmstops/pro-compo 0.3.34 → 0.3.35
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 +114 -58
- package/dist/index.min.css +1 -1
- package/es/hooks/useUpload.d.ts +15 -0
- package/es/hooks/useUpload.js +88 -0
- package/es/index.css +114 -58
- package/es/selectResourceModal/component.js +24 -8
- package/es/selectResourceModal/components/ListCardWrapper/index.d.ts +0 -0
- package/es/selectResourceModal/components/ListCardWrapper/index.js +56 -0
- package/es/selectResourceModal/components/ListContent/index.js +12 -35
- package/es/selectResourceModal/components/ListContentLocal/components/Upload.d.ts +0 -0
- package/es/selectResourceModal/components/ListContentLocal/components/Upload.js +67 -0
- package/es/selectResourceModal/components/ListContentLocal/index.d.ts +0 -0
- package/es/selectResourceModal/components/ListContentLocal/index.js +87 -0
- package/es/selectResourceModal/components/ListFilter/index.js +9 -2
- package/es/selectResourceModal/style/index.css +98 -58
- package/es/selectResourceModal/style/index.less +20 -2
- package/es/selectResourceModal/style/listCardWrapper.less +63 -0
- package/es/selectResourceModal/style/listContent.less +1 -63
- package/es/selectResourceModal/style/listContentLocal.less +26 -0
- package/es/selectResourceModal/style/listSelected.less +11 -3
- package/es/thumbCard/assets/magic.js +2 -0
- package/es/thumbCard/component.js +70 -43
- package/es/thumbCard/style/index.css +16 -0
- package/es/thumbCard/style/index.less +21 -0
- package/es/utils/tusUpload.d.ts +8 -0
- package/es/utils/tusUpload.js +35 -1
- package/lib/hooks/useUpload.js +91 -0
- package/lib/index.css +114 -58
- package/lib/selectResourceModal/component.js +25 -9
- package/lib/selectResourceModal/components/ListCardWrapper/index.js +57 -0
- package/lib/selectResourceModal/components/ListContent/index.js +15 -38
- package/lib/selectResourceModal/components/ListContentLocal/components/Upload.js +68 -0
- package/lib/selectResourceModal/components/ListContentLocal/index.js +88 -0
- package/lib/selectResourceModal/components/ListFilter/index.js +9 -2
- package/lib/selectResourceModal/style/index.css +98 -58
- package/lib/selectResourceModal/style/index.less +20 -2
- package/lib/selectResourceModal/style/listCardWrapper.less +63 -0
- package/lib/selectResourceModal/style/listContent.less +1 -63
- package/lib/selectResourceModal/style/listContentLocal.less +26 -0
- package/lib/selectResourceModal/style/listSelected.less +11 -3
- package/lib/thumbCard/assets/magic.js +3 -0
- package/lib/thumbCard/component.js +68 -41
- package/lib/thumbCard/style/index.css +16 -0
- package/lib/thumbCard/style/index.less +21 -0
- package/lib/utils/tusUpload.js +35 -0
- package/package.json +1 -1
|
@@ -9,6 +9,18 @@
|
|
|
9
9
|
border-radius: 2px;
|
|
10
10
|
cursor: pointer;
|
|
11
11
|
}
|
|
12
|
+
.thumb-select-wrapper .thumb-upload-loading {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
color: #fff;
|
|
19
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
20
|
+
}
|
|
21
|
+
.thumb-select-wrapper .thumb-upload-loading .arco-progress-circle-text {
|
|
22
|
+
color: #fff;
|
|
23
|
+
}
|
|
12
24
|
.thumb-select-wrapper .thumb-add {
|
|
13
25
|
color: var(--color-text-2);
|
|
14
26
|
font-size: 16px;
|
|
@@ -45,6 +57,10 @@
|
|
|
45
57
|
.thumb-select-wrapper:hover .thumb-handler-list {
|
|
46
58
|
opacity: 1;
|
|
47
59
|
}
|
|
60
|
+
.thumb-select-wrapper.thumb-no-mask {
|
|
61
|
+
background-color: #f2f3f5;
|
|
62
|
+
border: 1px dashed #e5e6eb !important;
|
|
63
|
+
}
|
|
48
64
|
.arco-dropdown-option-content {
|
|
49
65
|
display: flex;
|
|
50
66
|
gap: 8px;
|
|
@@ -10,6 +10,21 @@
|
|
|
10
10
|
border-radius: 2px;
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
|
|
13
|
+
// loading 模式
|
|
14
|
+
.thumb-upload-loading {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
color: #fff;
|
|
21
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
22
|
+
|
|
23
|
+
.arco-progress-circle-text {
|
|
24
|
+
color: #fff;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
13
28
|
// 添加模式
|
|
14
29
|
.thumb-add {
|
|
15
30
|
color: var(--color-text-2);
|
|
@@ -59,6 +74,12 @@
|
|
|
59
74
|
opacity: 1;
|
|
60
75
|
}
|
|
61
76
|
}
|
|
77
|
+
|
|
78
|
+
// 非马赛克模式
|
|
79
|
+
&.thumb-no-mask {
|
|
80
|
+
background-color: #f2f3f5;
|
|
81
|
+
border: 1px dashed #e5e6eb !important;
|
|
82
|
+
}
|
|
62
83
|
}
|
|
63
84
|
|
|
64
85
|
// 素材选择
|
package/es/utils/tusUpload.d.ts
CHANGED
|
@@ -6,3 +6,11 @@ import * as TUS from 'tus-js-client';
|
|
|
6
6
|
* @returns
|
|
7
7
|
*/
|
|
8
8
|
export declare function uploadByTUS(file: File, progressCallback?: (b: number, t: number) => void): Promise<TUS.Upload>;
|
|
9
|
+
export declare class TusUploadTask {
|
|
10
|
+
file: any;
|
|
11
|
+
upload: any;
|
|
12
|
+
platformKey?: string;
|
|
13
|
+
constructor(file: any, platformKey?: string);
|
|
14
|
+
start(callback: (bytesUploaded: any, bytesTotal: any) => any): Promise<unknown>;
|
|
15
|
+
abort(): any;
|
|
16
|
+
}
|
package/es/utils/tusUpload.js
CHANGED
|
@@ -47,4 +47,38 @@ function getFileType(file) {
|
|
|
47
47
|
fType = "application/x-rar";
|
|
48
48
|
return fType;
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
class TusUploadTask {
|
|
51
|
+
constructor(file, platformKey) {
|
|
52
|
+
this.file = file;
|
|
53
|
+
this.platformKey = platformKey || "holly";
|
|
54
|
+
}
|
|
55
|
+
start(callback) {
|
|
56
|
+
return new Promise((resolve, reject) => {
|
|
57
|
+
const upload = new TUS.Upload(this.file, {
|
|
58
|
+
endpoint: `${DEFAULT_UPLOAD_URL}/upload/`,
|
|
59
|
+
chunkSize: DEFAULT_UPLOAD_CHUNK_SIZE || 5242880,
|
|
60
|
+
retryDelays: [0, 1e3, 3e3, 5e3],
|
|
61
|
+
overridePatchMethod: true,
|
|
62
|
+
removeFingerprintOnSuccess: true,
|
|
63
|
+
metadata: {
|
|
64
|
+
filename: this.file.name,
|
|
65
|
+
filetype: getFileType(this.file),
|
|
66
|
+
platform: this.platformKey
|
|
67
|
+
},
|
|
68
|
+
onBeforeRequest: (req) => {
|
|
69
|
+
const xhr = req.getUnderlyingObject();
|
|
70
|
+
xhr.withCredentials = true;
|
|
71
|
+
},
|
|
72
|
+
onProgress: callback,
|
|
73
|
+
onSuccess: () => resolve(upload.url),
|
|
74
|
+
onError: (error) => reject(error)
|
|
75
|
+
});
|
|
76
|
+
this.upload = upload;
|
|
77
|
+
upload.start();
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
abort() {
|
|
81
|
+
return this.upload.abort();
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
export { TusUploadTask, uploadByTUS };
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
var vue = require("vue");
|
|
4
|
+
var index = require("../utils/index.js");
|
|
5
|
+
var tusUpload = require("../utils/tusUpload.js");
|
|
6
|
+
var request = require("../utils/request.js");
|
|
7
|
+
function addMedia(BASE_API, params) {
|
|
8
|
+
return request(BASE_API, {
|
|
9
|
+
url: "/poplar/v2/media/add",
|
|
10
|
+
method: "post",
|
|
11
|
+
data: params
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function useUpload() {
|
|
15
|
+
const list = vue.ref([]);
|
|
16
|
+
function uploadSuccess(file) {
|
|
17
|
+
const originList = list.value;
|
|
18
|
+
const taskIndex = originList.findIndex(
|
|
19
|
+
(task) => task.sig_id === file.sig_id
|
|
20
|
+
);
|
|
21
|
+
if (taskIndex !== -1) {
|
|
22
|
+
originList[taskIndex] = file;
|
|
23
|
+
list.value = originList;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
function recordTaskStatusChange(file, progress) {
|
|
27
|
+
const originList = list.value;
|
|
28
|
+
const taskIndex = originList.findIndex((task) => task.id === file.id);
|
|
29
|
+
if (taskIndex !== -1) {
|
|
30
|
+
progress !== -1 && (originList[taskIndex].progress = progress);
|
|
31
|
+
file.status != null && (originList[taskIndex].status = file.status);
|
|
32
|
+
file.msg != null && (originList[taskIndex].msg = file.msg);
|
|
33
|
+
originList[taskIndex].url = file.url;
|
|
34
|
+
} else {
|
|
35
|
+
file.created_at = new Date().getTime();
|
|
36
|
+
originList.push({ ...file, progress, status: 1 });
|
|
37
|
+
}
|
|
38
|
+
list.value = originList;
|
|
39
|
+
}
|
|
40
|
+
const uploadFile = (BASE_API, file, dir = 0, repoId, callback) => {
|
|
41
|
+
const newFile = {
|
|
42
|
+
id: index.generateUUID(),
|
|
43
|
+
sig_id: file.sig_id || index.generateUUID(),
|
|
44
|
+
name: file.name,
|
|
45
|
+
url: "",
|
|
46
|
+
size: file.size,
|
|
47
|
+
isUpload: true,
|
|
48
|
+
type: file.type
|
|
49
|
+
};
|
|
50
|
+
const upload = new tusUpload.TusUploadTask(file);
|
|
51
|
+
newFile.abort = () => upload.abort();
|
|
52
|
+
recordTaskStatusChange(newFile, 0);
|
|
53
|
+
const progress = (percent, total) => {
|
|
54
|
+
const progress2 = percent / total;
|
|
55
|
+
recordTaskStatusChange(newFile, progress2);
|
|
56
|
+
};
|
|
57
|
+
const uploading = upload.start(progress);
|
|
58
|
+
uploading.then(async (url) => {
|
|
59
|
+
const { code, message } = await addMedia(BASE_API, {
|
|
60
|
+
url,
|
|
61
|
+
size: newFile.size,
|
|
62
|
+
directory_id: dir,
|
|
63
|
+
repository_id: repoId,
|
|
64
|
+
catalog: newFile.type,
|
|
65
|
+
alias: newFile.name
|
|
66
|
+
});
|
|
67
|
+
if (code !== 0) {
|
|
68
|
+
console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u4E0A\u4F20\u5931\u8D25\uFF1A", newFile.name, code, message);
|
|
69
|
+
recordTaskStatusChange({ ...newFile, status: 2, msg: "\u6DFB\u52A0\u5230\u7D20\u6750\u5E93\u5931\u8D25" }, -1);
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
console.log("\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680} \u4E0A\u4F20\u6210\u529F\uFF1A", url);
|
|
73
|
+
recordTaskStatusChange({ ...newFile, url: message.url, status: 0 }, 1);
|
|
74
|
+
setTimeout(() => {
|
|
75
|
+
uploadSuccess({ ...message, sig_id: newFile.sig_id });
|
|
76
|
+
}, 200);
|
|
77
|
+
callback && callback({ ...message, sig_id: newFile.sig_id }, "success");
|
|
78
|
+
}).catch((e) => {
|
|
79
|
+
console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u4E0A\u4F20\u5931\u8D25\uFF1A", e);
|
|
80
|
+
recordTaskStatusChange({ ...newFile, status: 2, msg: "\u4E0A\u4F20\u4E2D\u65AD" }, -1);
|
|
81
|
+
callback && callback(newFile, "fail");
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
return {
|
|
85
|
+
list,
|
|
86
|
+
uploadFile,
|
|
87
|
+
recordTaskStatusChange
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
exports.addMedia = addMedia;
|
|
91
|
+
exports["default"] = useUpload;
|
package/lib/index.css
CHANGED
|
@@ -4254,6 +4254,18 @@
|
|
|
4254
4254
|
border-radius: 2px;
|
|
4255
4255
|
cursor: pointer;
|
|
4256
4256
|
}
|
|
4257
|
+
.thumb-select-wrapper .thumb-upload-loading {
|
|
4258
|
+
display: flex;
|
|
4259
|
+
align-items: center;
|
|
4260
|
+
justify-content: center;
|
|
4261
|
+
width: 100%;
|
|
4262
|
+
height: 100%;
|
|
4263
|
+
color: #fff;
|
|
4264
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
4265
|
+
}
|
|
4266
|
+
.thumb-select-wrapper .thumb-upload-loading .arco-progress-circle-text {
|
|
4267
|
+
color: #fff;
|
|
4268
|
+
}
|
|
4257
4269
|
.thumb-select-wrapper .thumb-add {
|
|
4258
4270
|
color: var(--color-text-2);
|
|
4259
4271
|
font-size: 16px;
|
|
@@ -4290,6 +4302,10 @@
|
|
|
4290
4302
|
.thumb-select-wrapper:hover .thumb-handler-list {
|
|
4291
4303
|
opacity: 1;
|
|
4292
4304
|
}
|
|
4305
|
+
.thumb-select-wrapper.thumb-no-mask {
|
|
4306
|
+
background-color: #f2f3f5;
|
|
4307
|
+
border: 1px dashed #e5e6eb !important;
|
|
4308
|
+
}
|
|
4293
4309
|
.arco-dropdown-option-content {
|
|
4294
4310
|
display: flex;
|
|
4295
4311
|
gap: 8px;
|
|
@@ -4299,59 +4315,7 @@
|
|
|
4299
4315
|
.card-list-wrapper {
|
|
4300
4316
|
display: grid;
|
|
4301
4317
|
grid-gap: 20px;
|
|
4302
|
-
grid-template-columns: repeat(
|
|
4303
|
-
}
|
|
4304
|
-
.card-list-wrapper .card-wrapper-image {
|
|
4305
|
-
position: relative;
|
|
4306
|
-
overflow: hidden;
|
|
4307
|
-
}
|
|
4308
|
-
.card-list-wrapper .card-wrapper-image .card-wrapper {
|
|
4309
|
-
overflow: hidden;
|
|
4310
|
-
aspect-ratio: 4 / 3;
|
|
4311
|
-
}
|
|
4312
|
-
.card-list-wrapper .card-wrapper-image .card-alias {
|
|
4313
|
-
width: 100%;
|
|
4314
|
-
margin-top: 6px;
|
|
4315
|
-
overflow: hidden;
|
|
4316
|
-
color: #3d3d3d;
|
|
4317
|
-
font-size: 14px;
|
|
4318
|
-
line-height: 22px;
|
|
4319
|
-
white-space: nowrap;
|
|
4320
|
-
text-overflow: ellipsis;
|
|
4321
|
-
}
|
|
4322
|
-
.card-list-wrapper .card-wrapper-image:hover .check-box-wrapper .check-box,
|
|
4323
|
-
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box.active {
|
|
4324
|
-
opacity: 1;
|
|
4325
|
-
}
|
|
4326
|
-
.card-list-wrapper .card-wrapper-image .check-box-wrapper {
|
|
4327
|
-
position: absolute;
|
|
4328
|
-
top: 8px;
|
|
4329
|
-
left: 8px;
|
|
4330
|
-
cursor: pointer;
|
|
4331
|
-
}
|
|
4332
|
-
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box {
|
|
4333
|
-
box-sizing: border-box;
|
|
4334
|
-
width: 22px;
|
|
4335
|
-
height: 22px;
|
|
4336
|
-
font-size: 14px;
|
|
4337
|
-
line-height: 22px;
|
|
4338
|
-
text-align: center;
|
|
4339
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
4340
|
-
border: 1px solid white;
|
|
4341
|
-
border-radius: 50%;
|
|
4342
|
-
opacity: 0;
|
|
4343
|
-
transition: all 0.3s ease-in-out;
|
|
4344
|
-
}
|
|
4345
|
-
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box::selection {
|
|
4346
|
-
display: none;
|
|
4347
|
-
}
|
|
4348
|
-
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box:hover {
|
|
4349
|
-
background-color: rgba(0, 0, 0, 0.3);
|
|
4350
|
-
}
|
|
4351
|
-
.card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box.active {
|
|
4352
|
-
color: white;
|
|
4353
|
-
background-color: #165dff;
|
|
4354
|
-
border-color: #165dff;
|
|
4318
|
+
grid-template-columns: repeat(5, 1fr);
|
|
4355
4319
|
}
|
|
4356
4320
|
.list-filter-wrapper {
|
|
4357
4321
|
display: flex;
|
|
@@ -4369,7 +4333,6 @@
|
|
|
4369
4333
|
}
|
|
4370
4334
|
.list-panel-wrapper {
|
|
4371
4335
|
width: 420px;
|
|
4372
|
-
max-height: 600px;
|
|
4373
4336
|
padding: 0 !important;
|
|
4374
4337
|
overflow: hidden;
|
|
4375
4338
|
border: none;
|
|
@@ -4383,7 +4346,12 @@
|
|
|
4383
4346
|
display: none;
|
|
4384
4347
|
}
|
|
4385
4348
|
.list-panel-wrapper .arco-popover-content {
|
|
4349
|
+
display: flex;
|
|
4350
|
+
flex-direction: column;
|
|
4351
|
+
height: 100%;
|
|
4352
|
+
max-height: 600px;
|
|
4386
4353
|
margin-top: 0;
|
|
4354
|
+
overflow: hidden;
|
|
4387
4355
|
}
|
|
4388
4356
|
.list-panel-wrapper .list-panel-header {
|
|
4389
4357
|
display: flex;
|
|
@@ -4403,8 +4371,11 @@
|
|
|
4403
4371
|
cursor: pointer;
|
|
4404
4372
|
}
|
|
4405
4373
|
.list-panel-wrapper .list-selected-record {
|
|
4406
|
-
|
|
4407
|
-
|
|
4374
|
+
flex: 1;
|
|
4375
|
+
overflow-y: scroll;
|
|
4376
|
+
}
|
|
4377
|
+
.list-panel-wrapper .list-selected-record::-webkit-scrollbar {
|
|
4378
|
+
display: none;
|
|
4408
4379
|
}
|
|
4409
4380
|
.list-panel-wrapper .list-selected-record .list-selected-item {
|
|
4410
4381
|
display: flex;
|
|
@@ -4424,6 +4395,85 @@
|
|
|
4424
4395
|
white-space: nowrap;
|
|
4425
4396
|
text-overflow: ellipsis;
|
|
4426
4397
|
}
|
|
4398
|
+
.upload-list-wrapper .list-content {
|
|
4399
|
+
margin-top: 30px;
|
|
4400
|
+
}
|
|
4401
|
+
.upload-list-wrapper .list-content .list-tips {
|
|
4402
|
+
margin-bottom: 16px;
|
|
4403
|
+
color: #3d3d3d;
|
|
4404
|
+
}
|
|
4405
|
+
.upload-list-wrapper .upload-wrapper {
|
|
4406
|
+
display: flex;
|
|
4407
|
+
flex-direction: column;
|
|
4408
|
+
}
|
|
4409
|
+
.upload-list-wrapper .upload-wrapper .upload-buttons {
|
|
4410
|
+
display: flex;
|
|
4411
|
+
gap: 20px;
|
|
4412
|
+
justify-content: center;
|
|
4413
|
+
margin: 20px 0;
|
|
4414
|
+
}
|
|
4415
|
+
.upload-list-wrapper .upload-wrapper .upload-dragger {
|
|
4416
|
+
width: calc(100% - 2px);
|
|
4417
|
+
}
|
|
4418
|
+
.card-wrapper-image {
|
|
4419
|
+
position: relative;
|
|
4420
|
+
overflow: hidden;
|
|
4421
|
+
cursor: pointer;
|
|
4422
|
+
}
|
|
4423
|
+
.card-wrapper-image .card-wrapper {
|
|
4424
|
+
position: relative;
|
|
4425
|
+
overflow: hidden;
|
|
4426
|
+
aspect-ratio: 4 / 3;
|
|
4427
|
+
}
|
|
4428
|
+
.card-wrapper-image .card-alias {
|
|
4429
|
+
width: 100%;
|
|
4430
|
+
margin-top: 6px;
|
|
4431
|
+
overflow: hidden;
|
|
4432
|
+
color: #3d3d3d;
|
|
4433
|
+
font-size: 14px;
|
|
4434
|
+
line-height: 22px;
|
|
4435
|
+
white-space: nowrap;
|
|
4436
|
+
text-overflow: ellipsis;
|
|
4437
|
+
}
|
|
4438
|
+
.card-wrapper-image:hover .check-box-wrapper .check-box,
|
|
4439
|
+
.card-wrapper-image .check-box-wrapper .check-box.active {
|
|
4440
|
+
opacity: 1;
|
|
4441
|
+
}
|
|
4442
|
+
.card-wrapper-image .check-box-wrapper {
|
|
4443
|
+
position: absolute;
|
|
4444
|
+
top: 8px;
|
|
4445
|
+
left: 8px;
|
|
4446
|
+
cursor: pointer;
|
|
4447
|
+
}
|
|
4448
|
+
.card-wrapper-image .check-box-wrapper .check-box {
|
|
4449
|
+
box-sizing: border-box;
|
|
4450
|
+
width: 22px;
|
|
4451
|
+
height: 22px;
|
|
4452
|
+
font-size: 14px;
|
|
4453
|
+
line-height: 22px;
|
|
4454
|
+
text-align: center;
|
|
4455
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
4456
|
+
border: 1px solid white;
|
|
4457
|
+
border-radius: 50%;
|
|
4458
|
+
opacity: 0;
|
|
4459
|
+
transition: all 0.3s ease-in-out;
|
|
4460
|
+
}
|
|
4461
|
+
.card-wrapper-image .check-box-wrapper .check-box::selection {
|
|
4462
|
+
display: none;
|
|
4463
|
+
}
|
|
4464
|
+
.card-wrapper-image .check-box-wrapper .check-box:hover {
|
|
4465
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
4466
|
+
}
|
|
4467
|
+
.card-wrapper-image .check-box-wrapper .check-box.active {
|
|
4468
|
+
color: white;
|
|
4469
|
+
background-color: #165dff;
|
|
4470
|
+
border-color: #165dff;
|
|
4471
|
+
}
|
|
4472
|
+
.resource-select-drawer .arco-drawer-body {
|
|
4473
|
+
box-sizing: border-box;
|
|
4474
|
+
padding: 0;
|
|
4475
|
+
overflow: hidden;
|
|
4476
|
+
}
|
|
4427
4477
|
.resource-select-container {
|
|
4428
4478
|
display: flex;
|
|
4429
4479
|
flex-direction: column;
|
|
@@ -4432,9 +4482,14 @@
|
|
|
4432
4482
|
height: 100%;
|
|
4433
4483
|
}
|
|
4434
4484
|
.resource-select-container .resource-select-filter,
|
|
4435
|
-
.resource-select-container .resource-select-content,
|
|
4436
4485
|
.resource-select-container .resource-select-footer {
|
|
4437
|
-
padding: 0
|
|
4486
|
+
padding: 0 40px;
|
|
4487
|
+
}
|
|
4488
|
+
.resource-select-container .resource-select-content .arco-scrollbar-container {
|
|
4489
|
+
padding: 0 40px;
|
|
4490
|
+
}
|
|
4491
|
+
.resource-select-container .resource-select-header {
|
|
4492
|
+
padding: 10px 24px 0;
|
|
4438
4493
|
}
|
|
4439
4494
|
.resource-select-container .resource-select-header .arco-tabs-nav::before {
|
|
4440
4495
|
display: none;
|
|
@@ -4449,6 +4504,7 @@
|
|
|
4449
4504
|
.resource-select-container .resource-select-footer {
|
|
4450
4505
|
display: flex;
|
|
4451
4506
|
justify-content: space-between;
|
|
4507
|
+
padding-bottom: 10px;
|
|
4452
4508
|
}
|
|
4453
4509
|
.resource-select-container .resource-select-footer .footer-right {
|
|
4454
4510
|
display: flex;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var vue = require("vue");
|
|
3
3
|
var webVue = require("@arco-design/web-vue");
|
|
4
|
-
var index$
|
|
4
|
+
var index$4 = require("../emptyData/index.js");
|
|
5
5
|
var index = require("./components/ListFilter/index.js");
|
|
6
6
|
var index$1 = require("./components/ListContent/index.js");
|
|
7
|
-
var index$
|
|
7
|
+
var index$3 = require("./components/ListSelected/index.js");
|
|
8
|
+
var index$2 = require("./components/ListContentLocal/index.js");
|
|
8
9
|
var useAttachement = require("../hooks/useAttachement.js");
|
|
9
10
|
var config = require("../config.js");
|
|
10
11
|
const _hoisted_1 = {
|
|
@@ -30,7 +31,8 @@ const _sfc_main = vue.defineComponent({
|
|
|
30
31
|
BASE_API: {},
|
|
31
32
|
visible: { type: Boolean },
|
|
32
33
|
userInfo: {},
|
|
33
|
-
maxcount: {}
|
|
34
|
+
maxcount: {},
|
|
35
|
+
filterOptions: {}
|
|
34
36
|
},
|
|
35
37
|
emits: ["update:visible", "submit"],
|
|
36
38
|
setup(__props, { emit: __emit }) {
|
|
@@ -91,7 +93,8 @@ const _sfc_main = vue.defineComponent({
|
|
|
91
93
|
visible: _ctx.visible,
|
|
92
94
|
width: "1024px",
|
|
93
95
|
header: false,
|
|
94
|
-
footer: false
|
|
96
|
+
footer: false,
|
|
97
|
+
class: "resource-select-drawer"
|
|
95
98
|
}, {
|
|
96
99
|
default: vue.withCtx(() => [
|
|
97
100
|
_ctx.userInfo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
@@ -138,9 +141,10 @@ const _sfc_main = vue.defineComponent({
|
|
|
138
141
|
activeKey.value !== "local" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
|
|
139
142
|
vue.createVNode(index, {
|
|
140
143
|
"disable-upload-by": activeKey.value !== "all",
|
|
144
|
+
filterOptions: _ctx.filterOptions,
|
|
141
145
|
onChange: vue.unref(changeFilter),
|
|
142
146
|
onUpload: handleToUpload
|
|
143
|
-
}, null, 8, ["disable-upload-by", "onChange"])
|
|
147
|
+
}, null, 8, ["disable-upload-by", "filterOptions", "onChange"])
|
|
144
148
|
])) : vue.createCommentVNode("v-if", true),
|
|
145
149
|
vue.createCommentVNode(" \u5217\u8868\u90E8\u5206 "),
|
|
146
150
|
vue.createElementVNode("div", _hoisted_4, [
|
|
@@ -149,14 +153,24 @@ const _sfc_main = vue.defineComponent({
|
|
|
149
153
|
style: { "height": "100%", "overflow": "auto" }
|
|
150
154
|
}, {
|
|
151
155
|
default: vue.withCtx(() => [
|
|
152
|
-
vue.createVNode(index$1, {
|
|
156
|
+
vue.withDirectives(vue.createVNode(index$1, {
|
|
153
157
|
loading: vue.unref(loading),
|
|
154
158
|
list: vue.unref(list),
|
|
155
159
|
disable: disableSelect.value,
|
|
156
160
|
"select-keys": selectedKeys.value,
|
|
157
161
|
onSelect: handleSelect,
|
|
158
162
|
onSelectOne: handleSelectOne
|
|
159
|
-
}, null, 8, ["loading", "list", "disable", "select-keys"])
|
|
163
|
+
}, null, 8, ["loading", "list", "disable", "select-keys"]), [
|
|
164
|
+
[vue.vShow, activeKey.value !== "local"]
|
|
165
|
+
]),
|
|
166
|
+
vue.withDirectives(vue.createVNode(index$2, {
|
|
167
|
+
disable: disableSelect.value,
|
|
168
|
+
"select-keys": selectedKeys.value,
|
|
169
|
+
onSelect: handleSelect,
|
|
170
|
+
onSelectOne: handleSelectOne
|
|
171
|
+
}, null, 8, ["disable", "select-keys"]), [
|
|
172
|
+
[vue.vShow, activeKey.value === "local"]
|
|
173
|
+
])
|
|
160
174
|
]),
|
|
161
175
|
_: 1
|
|
162
176
|
})
|
|
@@ -170,12 +184,14 @@ const _sfc_main = vue.defineComponent({
|
|
|
170
184
|
"page-size": vue.unref(limit),
|
|
171
185
|
"show-total": "",
|
|
172
186
|
"show-page-size": "",
|
|
187
|
+
"base-size": 3,
|
|
188
|
+
"buffer-size": 1,
|
|
173
189
|
onChange: _cache[1] || (_cache[1] = (e) => vue.unref(changePage)((e - 1) * vue.unref(limit))),
|
|
174
190
|
onPageSizeChange: vue.unref(changeSize)
|
|
175
191
|
}, null, 8, ["total", "page-size", "onPageSizeChange"])) : vue.createCommentVNode("v-if", true)
|
|
176
192
|
]),
|
|
177
193
|
selected.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
|
|
178
|
-
vue.createVNode(index$
|
|
194
|
+
vue.createVNode(index$3, {
|
|
179
195
|
maxcount: _ctx.maxcount,
|
|
180
196
|
selected: selected.value,
|
|
181
197
|
onRemove: handleSelect,
|
|
@@ -198,7 +214,7 @@ const _sfc_main = vue.defineComponent({
|
|
|
198
214
|
})
|
|
199
215
|
])) : vue.createCommentVNode("v-if", true)
|
|
200
216
|
])
|
|
201
|
-
])) : (vue.openBlock(), vue.createBlock(vue.unref(index$
|
|
217
|
+
])) : (vue.openBlock(), vue.createBlock(vue.unref(index$4), {
|
|
202
218
|
key: 1,
|
|
203
219
|
type: "empty",
|
|
204
220
|
customTip: "\u6682\u65E0\u6743\u9650"
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var vue = require("vue");
|
|
3
|
+
const _hoisted_1 = { class: "card-alias" };
|
|
4
|
+
const _hoisted_2 = {
|
|
5
|
+
key: 0,
|
|
6
|
+
class: "check-box active"
|
|
7
|
+
};
|
|
8
|
+
const _hoisted_3 = {
|
|
9
|
+
key: 1,
|
|
10
|
+
class: "check-box"
|
|
11
|
+
};
|
|
12
|
+
const _sfc_main = vue.defineComponent({
|
|
13
|
+
__name: "index",
|
|
14
|
+
props: {
|
|
15
|
+
item: {},
|
|
16
|
+
selectKeys: {},
|
|
17
|
+
disable: { type: Boolean }
|
|
18
|
+
},
|
|
19
|
+
emits: ["select"],
|
|
20
|
+
setup(__props, { emit: __emit }) {
|
|
21
|
+
const props = __props;
|
|
22
|
+
const emits = __emit;
|
|
23
|
+
const selectedOrder = vue.computed(() => {
|
|
24
|
+
var _a;
|
|
25
|
+
const result = {};
|
|
26
|
+
(_a = props.selectKeys) == null ? void 0 : _a.forEach((key, index) => {
|
|
27
|
+
result[key] = index + 1;
|
|
28
|
+
});
|
|
29
|
+
return result;
|
|
30
|
+
});
|
|
31
|
+
function handleCheck() {
|
|
32
|
+
if (props.disable && !selectedOrder.value[props.item.id])
|
|
33
|
+
return;
|
|
34
|
+
emits("select", props.item);
|
|
35
|
+
}
|
|
36
|
+
return (_ctx, _cache) => {
|
|
37
|
+
return vue.openBlock(), vue.createElementBlock("div", {
|
|
38
|
+
class: "card-wrapper-image",
|
|
39
|
+
onClick: vue.withModifiers(handleCheck, ["stop"])
|
|
40
|
+
}, [
|
|
41
|
+
vue.createElementVNode("div", {
|
|
42
|
+
class: vue.normalizeClass(["card-wrapper", { active: selectedOrder.value[_ctx.item.id] }])
|
|
43
|
+
}, [
|
|
44
|
+
vue.renderSlot(_ctx.$slots, "default")
|
|
45
|
+
], 2),
|
|
46
|
+
vue.createElementVNode("div", _hoisted_1, vue.toDisplayString(_ctx.item.alias), 1),
|
|
47
|
+
vue.createElementVNode("div", {
|
|
48
|
+
class: "check-box-wrapper",
|
|
49
|
+
onClick: vue.withModifiers(handleCheck, ["stop"])
|
|
50
|
+
}, [
|
|
51
|
+
selectedOrder.value[_ctx.item.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(selectedOrder.value[_ctx.item.id]), 1)) : !_ctx.disable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3)) : vue.createCommentVNode("v-if", true)
|
|
52
|
+
])
|
|
53
|
+
]);
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
module.exports = _sfc_main;
|
|
@@ -1,20 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var vue = require("vue");
|
|
3
3
|
var webVue = require("@arco-design/web-vue");
|
|
4
|
-
var index$
|
|
5
|
-
var index = require("../../../thumbCard/index.js");
|
|
4
|
+
var index$2 = require("../../../emptyData/index.js");
|
|
5
|
+
var index$1 = require("../../../thumbCard/index.js");
|
|
6
|
+
var index = require("../ListCardWrapper/index.js");
|
|
6
7
|
const _hoisted_1 = { class: "card-list-wrapper" };
|
|
7
|
-
const _hoisted_2 = { class: "card-wrapper" };
|
|
8
|
-
const _hoisted_3 = { class: "card-alias" };
|
|
9
|
-
const _hoisted_4 = ["onClick"];
|
|
10
|
-
const _hoisted_5 = {
|
|
11
|
-
key: 0,
|
|
12
|
-
class: "check-box active"
|
|
13
|
-
};
|
|
14
|
-
const _hoisted_6 = {
|
|
15
|
-
key: 1,
|
|
16
|
-
class: "check-box"
|
|
17
|
-
};
|
|
18
8
|
const _sfc_main = vue.defineComponent({
|
|
19
9
|
__name: "index",
|
|
20
10
|
props: {
|
|
@@ -39,49 +29,36 @@ const _sfc_main = vue.defineComponent({
|
|
|
39
29
|
emits("select-one", item);
|
|
40
30
|
}
|
|
41
31
|
}
|
|
42
|
-
function handleCheck(params) {
|
|
43
|
-
emits("select", params);
|
|
44
|
-
}
|
|
45
|
-
const selectedOrder = vue.computed(() => {
|
|
46
|
-
var _a;
|
|
47
|
-
const result = {};
|
|
48
|
-
(_a = props.selectKeys) == null ? void 0 : _a.forEach((key, index2) => {
|
|
49
|
-
result[key] = index2 + 1;
|
|
50
|
-
});
|
|
51
|
-
return result;
|
|
52
|
-
});
|
|
53
32
|
return (_ctx, _cache) => {
|
|
54
33
|
var _a, _b;
|
|
55
34
|
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
56
35
|
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.list, (item) => {
|
|
57
|
-
return vue.openBlock(), vue.
|
|
36
|
+
return vue.openBlock(), vue.createBlock(index, {
|
|
58
37
|
key: item.id,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
38
|
+
item,
|
|
39
|
+
"select-keys": _ctx.selectKeys,
|
|
40
|
+
disable: _ctx.disable,
|
|
41
|
+
onSelect: () => emits("select", item)
|
|
42
|
+
}, {
|
|
43
|
+
default: vue.withCtx(() => [
|
|
44
|
+
vue.createVNode(vue.unref(index$1), {
|
|
63
45
|
url: item.url,
|
|
64
46
|
thumb: item.thumb,
|
|
65
47
|
catalog: item.catalog,
|
|
66
48
|
meta: item,
|
|
49
|
+
"use-mask": true,
|
|
67
50
|
"handlers-key": handlersKey.value,
|
|
68
51
|
onHandle: handleOption
|
|
69
52
|
}, null, 8, ["url", "thumb", "catalog", "meta", "handlers-key"])
|
|
70
53
|
]),
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
class: "check-box-wrapper",
|
|
74
|
-
onClick: () => handleCheck(item)
|
|
75
|
-
}, [
|
|
76
|
-
selectedOrder.value[item.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, vue.toDisplayString(selectedOrder.value[item.id]), 1)) : !_ctx.disable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6)) : vue.createCommentVNode("v-if", true)
|
|
77
|
-
], 8, _hoisted_4)
|
|
78
|
-
]);
|
|
54
|
+
_: 2
|
|
55
|
+
}, 1032, ["item", "select-keys", "disable", "onSelect"]);
|
|
79
56
|
}), 128)),
|
|
80
57
|
vue.createCommentVNode(" \u7A7A\u72B6\u6001 "),
|
|
81
58
|
((_a = _ctx.list) == null ? void 0 : _a.length) === 0 && _ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Spin), {
|
|
82
59
|
key: 0,
|
|
83
60
|
loading: true
|
|
84
|
-
})) : !((_b = _ctx.list) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createBlock(vue.unref(index$
|
|
61
|
+
})) : !((_b = _ctx.list) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2), {
|
|
85
62
|
key: 1,
|
|
86
63
|
type: "empty",
|
|
87
64
|
customTip: "\u6682\u65E0\u6570\u636E"
|