|
|
@@ -33,7 +33,8 @@
|
|
33
|
33
|
<span class="c-theme pointer" @click="addMemberEvent">添加设计师</span>
|
|
34
|
34
|
</div>
|
|
35
|
35
|
|
|
36
|
|
- <tagBlock ref="tagRef" title="素材标签" spanTitleWidth="120px" selectWidth="490px" :largeHeight="true"
|
|
|
36
|
+ <tagBlock ref="tagRef" title="素材标签" spanTitleWidth="120px"
|
|
|
37
|
+ selectWidth="490px" :largeHeight="true"
|
|
37
|
38
|
@handleChange="val=>{pageInfo.tagChooseVal = val}"></tagBlock>
|
|
38
|
39
|
</div>
|
|
39
|
40
|
</div>
|
|
|
@@ -66,7 +67,6 @@
|
|
66
|
67
|
</div>
|
|
67
|
68
|
<!-- 列表-->
|
|
68
|
69
|
<TableList
|
|
69
|
|
- :updateKey="tableInfo.updateKey"
|
|
70
|
70
|
ref="tableListRef"
|
|
71
|
71
|
tableHeight="calc(100vh - 220px)"
|
|
72
|
72
|
:showSelect="true"
|
|
|
@@ -75,11 +75,13 @@
|
|
75
|
75
|
@selectChange="selectEvent"
|
|
76
|
76
|
>
|
|
77
|
77
|
<template v-slot:fileImg="slotProps">
|
|
78
|
|
- <img :src="slotProps.row.oss_url" alt="" style="width: 80px"
|
|
79
|
|
- v-if="slotProps.row.mtype==2">
|
|
80
|
|
- <video :controls="false"
|
|
81
|
|
- :src="slotProps.row.oss_url"
|
|
82
|
|
- v-if="slotProps.row.mtype==1" style="width: 80px"></video>
|
|
|
78
|
+ <div style="margin: 0 10px">
|
|
|
79
|
+ <img :src="slotProps.row.oss_url" alt="" style="width: 120px;"
|
|
|
80
|
+ v-if="slotProps.row.mtype==2">
|
|
|
81
|
+ <video controls
|
|
|
82
|
+ :src="slotProps.row.oss_url"
|
|
|
83
|
+ v-if="slotProps.row.mtype==1" style="height: 120px;width: 120px;z-index: 8000!important;"></video>
|
|
|
84
|
+ </div>
|
|
83
|
85
|
</template>
|
|
84
|
86
|
<template v-slot:name="slotProps">
|
|
85
|
87
|
<div style="text-align: left">
|
|
|
@@ -91,10 +93,21 @@
|
|
91
|
93
|
<div><span class="c-999 f12">创意人: </span> {{slotProps.row.idea_man_name || '-'}}</div>
|
|
92
|
94
|
<div><span class="c-999 f12">设计师: </span> {{slotProps.row.designer_name || '-'}}</div>
|
|
93
|
95
|
</template>
|
|
|
96
|
+ <template v-slot:tagBox="slotProps">
|
|
|
97
|
+ <div><span class="c-999 f12 tagSpan" v-for="i in slotProps.row.tagList">{{i.name||'-'}}</span></div>
|
|
|
98
|
+ </template>
|
|
|
99
|
+
|
|
94
|
100
|
<template v-slot:status="slotProps">
|
|
95
|
101
|
<div class="flex" style="justify-content: center">
|
|
96
|
|
- <el-icon size="18" color="#3173FF"><i-ep-CircleCheck/></el-icon>
|
|
97
|
|
- <span class="lMar5 f12">完成</span>
|
|
|
102
|
+ <span class="flex" v-if="slotProps.row.status == 1">
|
|
|
103
|
+ <el-icon size="18" color="#3173FF"><i-ep-CircleCheck/></el-icon>
|
|
|
104
|
+ <span class="lMar5 f12">完成</span>
|
|
|
105
|
+ </span>
|
|
|
106
|
+ <span class="flex" v-else-if="slotProps.row.status == 0" >
|
|
|
107
|
+ <el-icon size="18" class="turnAround"><i-ep-Loading/></el-icon>
|
|
|
108
|
+ <span class="lMar5 f12">等待中</span>
|
|
|
109
|
+ </span>
|
|
|
110
|
+ <span v-else>-</span>
|
|
98
|
111
|
</div>
|
|
99
|
112
|
</template>
|
|
100
|
113
|
</TableList>
|
|
|
@@ -117,7 +130,9 @@
|
|
117
|
130
|
<AddMember ref="addMemberRef" @init="init_createrList"></AddMember>
|
|
118
|
131
|
<!-- 衍生框 -->
|
|
119
|
132
|
<template v-for="item in pageInfo.uploadCopyList">
|
|
120
|
|
- <uploadCopy :name="item.file_name" :showFlag="item.show" :copyParams="item.copyParams" @getTableList="getTableList"></uploadCopy>
|
|
|
133
|
+ <uploadCopy :name="item.file_name" :showFlag="item.show" :copyParams="item.copyParams"
|
|
|
134
|
+ @skipEvent="skipEvent"
|
|
|
135
|
+ @getTableList="getTableList"></uploadCopy>
|
|
121
|
136
|
</template>
|
|
122
|
137
|
<!-- 失败框 -->
|
|
123
|
138
|
<uploadFail ref="uploadFailRef"></uploadFail>
|
|
|
@@ -168,7 +183,7 @@ const pageInfo = reactive<reactiveTableAndAny>({
|
|
168
|
183
|
const ideaManRef = ref<{value:string|number}>()
|
|
169
|
184
|
const designerRef = ref<{value:string|number}>()
|
|
170
|
185
|
const CataRef = ref<{value:string,idVal:number,initAllAlbum:()=>void}>()
|
|
171
|
|
-const tagRef = ref<{init:()=>void}>()
|
|
|
186
|
+const tagRef = ref<{init:()=>void,pageInfo:any}>()
|
|
172
|
187
|
const handleFileChange = async (e:Event)=>{
|
|
173
|
188
|
if(!CataRef.value!.idVal){
|
|
174
|
189
|
ElMessage.error('请先选择目录!')
|
|
|
@@ -183,7 +198,22 @@ const handleFileChange = async (e:Event)=>{
|
|
183
|
198
|
fileRef.value!.value = ''
|
|
184
|
199
|
return
|
|
185
|
200
|
}
|
|
186
|
|
- const target = e.target as HTMLInputElement
|
|
|
201
|
+ const target:any = e.target as HTMLInputElement
|
|
|
202
|
+ if(target.files){
|
|
|
203
|
+ for (let i = 0; i < target.files.length; i++) {
|
|
|
204
|
+ let obj: any = target.files[i]
|
|
|
205
|
+ tableInfo.tableList.push({
|
|
|
206
|
+ oss_url: '',
|
|
|
207
|
+ name: obj.name.replace(('.'+obj.type.split('/')[1]),""),
|
|
|
208
|
+ mtype: obj.type,
|
|
|
209
|
+ file_size: obj.size,
|
|
|
210
|
+ tagList: tagRef.value!.pageInfo.valNameList,
|
|
|
211
|
+ idea_man_name: pageInfo.createrList[pageInfo.createrList.findIndex(n => n.id == ideaManRef.value!.value)].username,
|
|
|
212
|
+ designer_name: pageInfo.editorList[pageInfo.editorList.findIndex(n => n.id == designerRef.value!.value)].username,
|
|
|
213
|
+ status: 0
|
|
|
214
|
+ })
|
|
|
215
|
+ }
|
|
|
216
|
+ }
|
|
187
|
217
|
const files:any = target.files// 注意这里取得的是一个类数组
|
|
188
|
218
|
if(files){
|
|
189
|
219
|
// 取得文件
|
|
|
@@ -207,14 +237,12 @@ const handleFileChange = async (e:Event)=>{
|
|
207
|
237
|
const loading = ref<boolean>(false)
|
|
208
|
238
|
const fileRef = ref()
|
|
209
|
239
|
const fileUpload_check = (formData:any) => {
|
|
210
|
|
- loading.value = true
|
|
211
|
240
|
axios.post('/api/material/checkFile',formData,{
|
|
212
|
241
|
headers:{'Content-Type': 'multipart/form-data'} // 注意设置编码类型
|
|
213
|
242
|
}).then(res=>{
|
|
214
|
243
|
if(res.data&&res.data.errNo=='0'){ //首次上传
|
|
215
|
244
|
fileUpload_save(res.data.rst)
|
|
216
|
245
|
}else if(res.data.errNo == '1122'){//已经存在
|
|
217
|
|
- loading.value = false
|
|
218
|
246
|
let arg:any = res.data.rst.ind
|
|
219
|
247
|
arg.show = true
|
|
220
|
248
|
arg.copyParams = {
|
|
|
@@ -228,16 +256,22 @@ const fileUpload_check = (formData:any) => {
|
|
228
|
256
|
file_mime:arg.file_mime,
|
|
229
|
257
|
}
|
|
230
|
258
|
pageInfo.uploadCopyList.push(arg)
|
|
|
259
|
+
|
|
|
260
|
+ if(tableInfo.tableList&&tableInfo.tableList.length>0){
|
|
|
261
|
+ tableInfo.tableList.forEach(i=>{
|
|
|
262
|
+ if(i.name == arg.file_name && !i.oss_url){
|
|
|
263
|
+ i.name+='-衍生'
|
|
|
264
|
+ }
|
|
|
265
|
+ })
|
|
|
266
|
+ updateTable()
|
|
|
267
|
+ }
|
|
231
|
268
|
}else{
|
|
232
|
|
- loading.value = false
|
|
233
|
269
|
ElMessage.error(res.data.errMsg)
|
|
234
|
270
|
}
|
|
235
|
271
|
}).catch(error =>{
|
|
236
|
|
- loading.value = false
|
|
237
|
272
|
ElMessage.error('上传接口异常,请联系管理员')
|
|
238
|
273
|
fileRef.value!.value = ''
|
|
239
|
274
|
}).finally(()=>{
|
|
240
|
|
- loading.value = false
|
|
241
|
275
|
fileRef.value!.value = ''
|
|
242
|
276
|
})
|
|
243
|
277
|
}
|
|
|
@@ -258,28 +292,56 @@ const fileUpload_save = async (arg:any) => {
|
|
258
|
292
|
let resNew:any = res.rst
|
|
259
|
293
|
ElMessage.success(res.errMsg)
|
|
260
|
294
|
getTableList(resNew)
|
|
261
|
|
- loading.value = false
|
|
262
|
295
|
}else{
|
|
263
|
296
|
ElMessage.error(res.errMsg)
|
|
264
|
297
|
}
|
|
265
|
298
|
}
|
|
266
|
299
|
|
|
267
|
|
-//显示已上传列表
|
|
268
|
|
-const getTableList = (obj:any) => {
|
|
269
|
|
- tableInfo.tableList.push(obj)
|
|
|
300
|
+//跳过
|
|
|
301
|
+const skipEvent = (name:any) => {
|
|
|
302
|
+ if(tableInfo.tableList&&tableInfo.tableList.length>0){
|
|
|
303
|
+ tableInfo.tableList.forEach((i,idx)=>{
|
|
|
304
|
+ if(i.name == name && !i.oss_url){
|
|
|
305
|
+ tableInfo.tableList.splice(idx,1)
|
|
|
306
|
+ }
|
|
|
307
|
+ })
|
|
|
308
|
+ updateTable()
|
|
|
309
|
+ }
|
|
|
310
|
+}
|
|
|
311
|
+//更新表格
|
|
|
312
|
+const updateTable = () => {
|
|
|
313
|
+ tableInfo.tableList.push({});
|
|
|
314
|
+ tableInfo.tableList.pop();
|
|
|
315
|
+}
|
|
|
316
|
+
|
|
|
317
|
+//显示已上传列表中的图片或视频
|
|
|
318
|
+const getTableList = (obj:any,nameVal?:any) => {
|
|
|
319
|
+ tableInfo.tableList.forEach(i=>{
|
|
|
320
|
+ if(i.name == (nameVal ? nameVal : obj.name)){
|
|
|
321
|
+ i.oss_url = obj.oss_url
|
|
|
322
|
+ i.status = 1
|
|
|
323
|
+ i.file_size = obj.file_size
|
|
|
324
|
+ i.mtype = obj.mtype
|
|
|
325
|
+ i.name = obj.name
|
|
|
326
|
+ i.id = obj.id
|
|
|
327
|
+ }
|
|
|
328
|
+ })
|
|
|
329
|
+ updateTable()
|
|
270
|
330
|
}
|
|
271
|
331
|
|
|
272
|
332
|
// 表格数据公共ts
|
|
|
333
|
+const tableListRef = ref<{clearSelected:()=>void}>()
|
|
273
|
334
|
const tableInfo = reactive<reactiveTableAndAny>({
|
|
274
|
335
|
tableList:[],
|
|
275
|
336
|
descolList:[
|
|
276
|
|
- { name:'素材文件',column:'fileImg',slotFlag: true},
|
|
277
|
|
- { name:'素材名',column:'name',slotFlag: true,minWidth:'180px'},
|
|
|
337
|
+ { name:'素材文件',column:'fileImg',slotFlag: true,minWidth:'140px',isfixed:true},
|
|
|
338
|
+ { name:'素材名',column:'name',slotFlag: true,minWidth:'180px',alignSelf:'left'},
|
|
278
|
339
|
{ name:'人员信息',column:'info',slotFlag: true},
|
|
|
340
|
+ { name:'素材标签',column:'tagBox',slotFlag: true},
|
|
279
|
341
|
{ name:'上传状态',column:'status',slotFlag: true},
|
|
280
|
342
|
],
|
|
281
|
|
- updateKey:1
|
|
282
|
343
|
})
|
|
|
344
|
+//选择
|
|
283
|
345
|
const selectEvent = (val:any) => {
|
|
284
|
346
|
pageInfo.chooseList = []
|
|
285
|
347
|
val.forEach(i=>{
|
|
|
@@ -342,8 +404,9 @@ const editCreaterEditorEvent = (val:any,title:string) => {
|
|
342
|
404
|
})
|
|
343
|
405
|
})
|
|
344
|
406
|
}
|
|
345
|
|
- tableInfo.updateKey++
|
|
|
407
|
+ tableListRef.value!.clearSelected()
|
|
346
|
408
|
pageInfo.chooseList = []
|
|
|
409
|
+ updateTable()
|
|
347
|
410
|
}
|
|
348
|
411
|
|
|
349
|
412
|
|
|
|
@@ -399,6 +462,15 @@ onMounted(()=>{
|
|
399
|
462
|
})
|
|
400
|
463
|
</script>
|
|
401
|
464
|
<style lang="scss" scoped>
|
|
|
465
|
+.tagSpan{
|
|
|
466
|
+ display: inline-block;
|
|
|
467
|
+ background: #F4F4F4;
|
|
|
468
|
+ border-radius: 3px;
|
|
|
469
|
+ color: #161E46;
|
|
|
470
|
+ font-size: 14px;
|
|
|
471
|
+ padding: 1px 6px;
|
|
|
472
|
+ margin-right: 4px;
|
|
|
473
|
+}
|
|
402
|
474
|
|
|
403
|
475
|
.uploadMaterialBox{
|
|
404
|
476
|
:deep(.el-drawer__header){
|
