@jx3box/jx3box-editor 1.2.3 → 1.2.6
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/package.json +2 -1
- package/src/Item.vue +12 -3
- package/src/Upload.vue +169 -156
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jx3box/jx3box-editor",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.6",
|
|
4
4
|
"description": "JX3BOX Article & Editor",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
"axios": "^0.19.2",
|
|
42
42
|
"core-js": "^3.6.5",
|
|
43
43
|
"csslab": "^4.0.3",
|
|
44
|
+
"dayjs": "^1.10.7",
|
|
44
45
|
"element-ui": "^2.13.2",
|
|
45
46
|
"hevue-img-preview": "^5.0.0",
|
|
46
47
|
"highlight.js": "^11.3.1",
|
package/src/Item.vue
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
<div
|
|
23
23
|
v-if="parseInt(source.MaxExistTime) > 0"
|
|
24
24
|
class="u-max-exist-time"
|
|
25
|
-
v-text="'
|
|
25
|
+
v-text="'限时时间:' + showDuration(source.MaxExistTime)"
|
|
26
26
|
></div>
|
|
27
27
|
<!-- 最大拥有数 -->
|
|
28
28
|
<div
|
|
@@ -242,12 +242,17 @@
|
|
|
242
242
|
|
|
243
243
|
<script>
|
|
244
244
|
import { get_item } from "../service/item.js";
|
|
245
|
-
|
|
245
|
+
|
|
246
246
|
import attribute_percent from "../assets/js/item/attribute_percent.js";
|
|
247
247
|
import bind from "../assets/js/item/bind.js";
|
|
248
248
|
import color from "../assets/js/item/color.js";
|
|
249
249
|
import { iconLink } from "@jx3box/jx3box-common/js/utils";
|
|
250
250
|
|
|
251
|
+
import second_format from "../assets/js/item/second_format.js";
|
|
252
|
+
import dayjs from 'dayjs';
|
|
253
|
+
import duration from 'dayjs/plugin/duration'
|
|
254
|
+
dayjs.extend(duration);
|
|
255
|
+
|
|
251
256
|
export default {
|
|
252
257
|
name: "Item",
|
|
253
258
|
props: ["item", "item_id", "jx3ClientType","client"],
|
|
@@ -280,6 +285,10 @@ export default {
|
|
|
280
285
|
return iconLink(id,this.final_client)
|
|
281
286
|
},
|
|
282
287
|
second_format,
|
|
288
|
+
showDuration : function (val){
|
|
289
|
+
val = Number(val)
|
|
290
|
+
return val && dayjs.duration(val).asDays().toFixed(0) + '天';
|
|
291
|
+
},
|
|
283
292
|
attribute_percent,
|
|
284
293
|
bind,
|
|
285
294
|
color,
|
|
@@ -334,4 +343,4 @@ export default {
|
|
|
334
343
|
|
|
335
344
|
<style lang="less">
|
|
336
345
|
@import "../assets/css/module/item.less";
|
|
337
|
-
</style>
|
|
346
|
+
</style>
|
package/src/Upload.vue
CHANGED
|
@@ -53,174 +53,187 @@
|
|
|
53
53
|
</template>
|
|
54
54
|
|
|
55
55
|
<script>
|
|
56
|
-
import axios from "axios";
|
|
57
|
-
import { __cms } from "@jx3box/jx3box-common/data/jx3box.json";
|
|
58
|
-
const API_Root = process.env.NODE_ENV === "production" ? __cms : "/";
|
|
59
|
-
const API = API_Root + "api/cms/upload";
|
|
60
|
-
|
|
61
|
-
import allow_types from "@jx3box/jx3box-common/data/conf";
|
|
62
|
-
const imgtypes = ["jpg", "png", "gif", "bmp", "webp"];
|
|
63
|
-
|
|
64
|
-
export default {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
56
|
+
import axios from "axios";
|
|
57
|
+
import { __cms } from "@jx3box/jx3box-common/data/jx3box.json";
|
|
58
|
+
const API_Root = process.env.NODE_ENV === "production" ? __cms : "/";
|
|
59
|
+
const API = API_Root + "api/cms/upload";
|
|
60
|
+
|
|
61
|
+
import allow_types from "@jx3box/jx3box-common/data/conf";
|
|
62
|
+
const imgtypes = ["jpg", "png", "gif", "bmp", "webp"];
|
|
63
|
+
|
|
64
|
+
export default {
|
|
65
|
+
name: "Upload",
|
|
66
|
+
props: {
|
|
67
|
+
text: {
|
|
68
|
+
type: String,
|
|
69
|
+
},
|
|
70
|
+
onlyImage: {
|
|
71
|
+
type: Boolean,
|
|
72
|
+
},
|
|
73
|
+
desc: {
|
|
74
|
+
type: String,
|
|
75
|
+
},
|
|
76
|
+
accept: {
|
|
77
|
+
type: String,
|
|
78
|
+
},
|
|
79
|
+
enable: {
|
|
80
|
+
type: Boolean,
|
|
81
|
+
default: true,
|
|
82
|
+
},
|
|
75
83
|
},
|
|
76
|
-
|
|
77
|
-
|
|
84
|
+
data: function() {
|
|
85
|
+
return {
|
|
86
|
+
API: API,
|
|
87
|
+
dialogVisible: false,
|
|
88
|
+
tip: this.desc || "一次最多同时上传10个文件(不超过5M),格式限常见的图片、文档、数据表及压缩包",
|
|
89
|
+
btn_txt: this.text || "上传附件",
|
|
90
|
+
|
|
91
|
+
fileList: [],
|
|
92
|
+
selectedCount: 0,
|
|
93
|
+
insertList: "",
|
|
94
|
+
|
|
95
|
+
// accept: allow_types.accept,
|
|
96
|
+
// sizeLimit: allow_types.sizeLimit,
|
|
97
|
+
};
|
|
78
98
|
},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
tip: this.desc || "一次最多同时上传10个文件(不超过5M),格式限常见的图片、文档、数据表及压缩包",
|
|
89
|
-
btn_txt: this.text || "上传附件",
|
|
90
|
-
|
|
91
|
-
fileList: [],
|
|
92
|
-
selectedCount: 0,
|
|
93
|
-
insertList: "",
|
|
94
|
-
|
|
95
|
-
// accept: allow_types.accept,
|
|
96
|
-
// sizeLimit: allow_types.sizeLimit,
|
|
97
|
-
};
|
|
98
|
-
},
|
|
99
|
-
watch: {
|
|
100
|
-
fileList: {
|
|
101
|
-
deep: true,
|
|
102
|
-
handler: function(newval) {
|
|
103
|
-
this.$emit("update", newval);
|
|
99
|
+
watch: {
|
|
100
|
+
fileList: {
|
|
101
|
+
deep: true,
|
|
102
|
+
handler: function(newval) {
|
|
103
|
+
this.$emit("update", newval);
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
insertList: function(newval) {
|
|
107
|
+
this.$emit("htmlUpdate", newval);
|
|
104
108
|
},
|
|
105
109
|
},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
computed: {
|
|
111
|
-
buttonTXT: function() {
|
|
112
|
-
return this.selectedCount ? "插 入" : "确 定";
|
|
110
|
+
computed: {
|
|
111
|
+
buttonTXT: function() {
|
|
112
|
+
return this.selectedCount ? "插 入" : "确 定";
|
|
113
|
+
},
|
|
113
114
|
},
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
115
|
+
methods: {
|
|
116
|
+
change: function(file, fileList) {
|
|
117
|
+
if (file.status != "success") {
|
|
118
|
+
// 判断大小
|
|
119
|
+
// if (file.size > this.sizeLimit) {
|
|
120
|
+
// this.$message.error("文件超出大小限制");
|
|
121
|
+
// this.removeFile(fileList, file.uid);
|
|
122
|
+
// return;
|
|
123
|
+
// }
|
|
124
|
+
|
|
125
|
+
// 分析文件类型
|
|
126
|
+
let ext = file.name.split(".").pop();
|
|
127
|
+
let is_img = imgtypes.includes(ext);
|
|
128
|
+
|
|
129
|
+
if (this.onlyImage && !is_img) return;
|
|
130
|
+
|
|
131
|
+
// 构建数据
|
|
132
|
+
let fdata = new FormData();
|
|
133
|
+
fdata.append("file", file.raw);
|
|
134
|
+
|
|
135
|
+
// 异步上传
|
|
136
|
+
axios
|
|
137
|
+
.post(API, fdata, {
|
|
138
|
+
headers: {
|
|
139
|
+
"Content-Type": "multipart/form-data",
|
|
140
|
+
},
|
|
141
|
+
withCredentials: true,
|
|
142
|
+
auth: {
|
|
143
|
+
username: (localStorage && localStorage.getItem("token")) || "",
|
|
144
|
+
password: "cms common request",
|
|
145
|
+
},
|
|
146
|
+
})
|
|
147
|
+
.then((res) => {
|
|
148
|
+
if (res.data.code) {
|
|
149
|
+
this.$message({
|
|
150
|
+
message: res.data.msg,
|
|
151
|
+
type: "error",
|
|
152
|
+
});
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
// 提醒
|
|
156
|
+
this.$message({
|
|
157
|
+
message: "上传成功",
|
|
158
|
+
type: "success",
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
// 修改path
|
|
162
|
+
file.url = res.data.data && res.data.data[0];
|
|
163
|
+
|
|
164
|
+
// 额外赋值
|
|
165
|
+
file.is_img = is_img;
|
|
166
|
+
file.selected = true;
|
|
167
|
+
|
|
168
|
+
// 修改状态加入仓库
|
|
169
|
+
file.status = "success";
|
|
170
|
+
this.fileList.push(file);
|
|
171
|
+
this.selectedCount++;
|
|
172
|
+
})
|
|
173
|
+
.catch((err) => {
|
|
174
|
+
if (err.response.data.code) {
|
|
175
|
+
this.$message.error(`[${err.response.data.code}] ${err.response.data.message}`);
|
|
176
|
+
} else {
|
|
177
|
+
this.$message.error("请求异常");
|
|
178
|
+
}
|
|
146
179
|
});
|
|
147
|
-
|
|
148
|
-
// 修改path
|
|
149
|
-
file.url = res.data.data && res.data.data[0];
|
|
150
|
-
|
|
151
|
-
// 额外赋值
|
|
152
|
-
file.is_img = is_img;
|
|
153
|
-
file.selected = true;
|
|
154
|
-
|
|
155
|
-
// 修改状态加入仓库
|
|
156
|
-
file.status = "success";
|
|
157
|
-
this.fileList.push(file);
|
|
158
|
-
this.selectedCount++;
|
|
159
|
-
})
|
|
160
|
-
.catch((err) => {
|
|
161
|
-
if (err.response.data.code) {
|
|
162
|
-
this.$message.error(`[${err.response.data.code}] ${err.response.data.message}`);
|
|
163
|
-
} else {
|
|
164
|
-
this.$message.error("请求异常");
|
|
165
|
-
}
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
select: function(file) {
|
|
170
|
-
if (file.status == "success") {
|
|
171
|
-
this.$set(file, "selected", !file.selected);
|
|
172
|
-
file.selected ? this.selectedCount++ : this.selectedCount--;
|
|
173
|
-
}
|
|
174
|
-
},
|
|
175
|
-
buildHTML: function() {
|
|
176
|
-
let list = [];
|
|
177
|
-
this.fileList.forEach((file) => {
|
|
178
|
-
if (file.selected) {
|
|
179
|
-
file.is_img ? list.push(`<img src="${file.url}" />`) : list.push(`<a target="_blank" href="${file.url}">${file.name}</a>`);
|
|
180
180
|
}
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
181
|
+
},
|
|
182
|
+
select: function(file) {
|
|
183
|
+
if (file.status == "success") {
|
|
184
|
+
this.$set(file, "selected", !file.selected);
|
|
185
|
+
file.selected ? this.selectedCount++ : this.selectedCount--;
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
buildHTML: function() {
|
|
189
|
+
let list = [];
|
|
190
|
+
this.fileList.forEach((file) => {
|
|
191
|
+
if (file.selected) {
|
|
192
|
+
file.is_img ? list.push(`<img src="${file.url}" />`) : list.push(`<a target="_blank" href="${file.url}">${file.name}</a>`);
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
this.insertList = list.join(" \n");
|
|
196
|
+
return this.insertList;
|
|
197
|
+
},
|
|
198
|
+
insert: function() {
|
|
199
|
+
// 关闭窗口
|
|
200
|
+
this.dialogVisible = false;
|
|
188
201
|
|
|
189
|
-
|
|
190
|
-
|
|
202
|
+
//为空不执行插入
|
|
203
|
+
if (!this.selectedCount) return;
|
|
191
204
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
205
|
+
// 传递值
|
|
206
|
+
this.$emit("insert", {
|
|
207
|
+
list: this.fileList,
|
|
208
|
+
html: this.buildHTML(),
|
|
209
|
+
});
|
|
197
210
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
211
|
+
//移除所有选择状态
|
|
212
|
+
this.resetSelectStatus();
|
|
213
|
+
},
|
|
214
|
+
resetSelectStatus: function() {
|
|
215
|
+
this.fileList.forEach((file, i) => {
|
|
216
|
+
this.$set(this.fileList[i], "selected", false);
|
|
217
|
+
});
|
|
218
|
+
this.selectedCount = 0;
|
|
219
|
+
},
|
|
220
|
+
clear: function() {
|
|
221
|
+
this.$refs.uploadbox.clearFiles();
|
|
222
|
+
this.fileList = [];
|
|
223
|
+
},
|
|
224
|
+
removeFile: function(fileList, uid) {
|
|
225
|
+
fileList.forEach((file, i) => {
|
|
226
|
+
if (file.uid == uid) {
|
|
227
|
+
fileList.splice(i, 1);
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
},
|
|
217
231
|
},
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
};
|
|
232
|
+
mounted: function() {},
|
|
233
|
+
components: {},
|
|
234
|
+
};
|
|
222
235
|
</script>
|
|
223
236
|
|
|
224
237
|
<style lang="less">
|
|
225
|
-
@import "../assets/css/upload.less";
|
|
238
|
+
@import "../assets/css/upload.less";
|
|
226
239
|
</style>
|