Skip to content

C
confucius
Commit 623b19b2 authored by Mac's avatar Mac
Browse files
Options

1

parent f6ef0ecc
Show whitespace changes
Inline Side-by-side
Showing with 585 additions and 196 deletions
src/components/enterprise/material/allAddSC.vue
View file @ 623b19b2
......@@ -9,17 +9,18 @@
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId" @input="$forceUpdate()"
ref="ID" :options="allclassifyList" label="分组" :dense="false" emit-value map-options />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.TextModel.Title" @input="$forceUpdate()"
label="文本标题" style="margin-top: 20px;" />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.TextModel.Content" @input="$forceUpdate()"
type="textarea" label="文本内容" style="margin-top: 20px;" />
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
@input="$forceUpdate()" ref="ID" :options="allclassifyList" label="分组" :dense="false"
emit-value map-options />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.TextModel.Title"
@input="$forceUpdate()" label="文本标题" style="margin-top: 20px;" />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.TextModel.Content"
@input="$forceUpdate()" type="textarea" label="文本内容" style="margin-top: 20px;" />
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="getcancel()" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="savewb()" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="savewb()" />
</q-card-actions>
</q-card>
</q-dialog>
......@@ -33,8 +34,9 @@
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId" @input="$forceUpdate()"
ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value map-options />
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
@input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传图片:</div>
<div style="margin-top: 15px;">
......@@ -56,7 +58,7 @@
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="getcancel" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="saveImage()" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="saveImage()" />
</q-card-actions>
</q-card>
</q-dialog>
......@@ -70,8 +72,9 @@
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId" @input="$forceUpdate()"
ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value map-options />
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
@input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传图片:</div>
<div style="margin-top: 15px;">
......@@ -86,12 +89,14 @@
<div style="margin-top: 20px;">
图片大小不超过2M，图片名不能重复，支持JPG，JPEG及PNG格式
</div>
<q-input filled clearable standout="bg-primary text-white" v-model="addMsg.ImgTextModel.Title" @input="$forceUpdate()"
label="添加标题" :rules="[val => !!val || '请输入标题']" style="margin-top: 20px;" />
<q-input filled clearable standout="bg-primary text-white" v-model="addMsg.ImgTextModel.Description" type="textarea" @input="$forceUpdate()"
label="添加描述"
style="margin-top: 20px;" />
<q-input filled clearable standout="bg-primary text-white" v-model="addMsg.ImgTextModel.ImgLink" @input="$forceUpdate()"
<q-input filled clearable standout="bg-primary text-white"
v-model="addMsg.ImgTextModel.Title" @input="$forceUpdate()" label="添加标题"
:rules="[val => !!val || '请输入标题']" style="margin-top: 20px;" />
<q-input filled clearable standout="bg-primary text-white"
v-model="addMsg.ImgTextModel.Description" type="textarea" @input="$forceUpdate()"
label="添加描述" style="margin-top: 20px;" />
<q-input filled clearable standout="bg-primary text-white"
v-model="addMsg.ImgTextModel.ImgLink" @input="$forceUpdate()"
label="请输入跳转链接，且必须以http://或https://开头" style="margin-top: 20px;"
:rules="[ val => !!val || '请输入跳转链接']" />
</div>
......@@ -101,7 +106,7 @@
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="getcancel" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="saveImagetext()" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="saveImagetext()" />
</q-card-actions>
</q-card>
</q-dialog>
......@@ -115,8 +120,9 @@
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId" @input="$forceUpdate()"
ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value map-options />
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
@input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传音频:</div>
<audio controls="controls" v-if='addMsg.AudioModel.AudioPath' style="margin-top: 10px;">
......@@ -126,7 +132,8 @@
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传"></q-btn>
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
</q-btn>
</el-upload>
<div style="margin-top: 20px;">
(音频上传大小不超过2MB，播放长度不超过60s,支持AMR,MP3格式。)
......@@ -139,7 +146,7 @@
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="getcancel" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="saveaudio()" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="saveaudio()" />
</q-card-actions>
</q-card>
</q-dialog>
......@@ -153,12 +160,13 @@
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId" @input="$forceUpdate()"
ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value map-options />
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
@input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传视频:</div>
<video width="320" height="240" controls="controls" v-if="addMsg.VideoModel.VideoPath!=''" >
<video width="320" height="240" controls="controls" v-if="addMsg.VideoModel.VideoPath!=''">
<source :src="addMsg.VideoModel.VideoPath" type="video/ogg" />
<source :src="addMsg.VideoModel.VideoPath" type="video/mp4" />
<source :src="addMsg.VideoModel.VideoPath" type="video/webm" />
......@@ -166,7 +174,8 @@
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传"></q-btn>
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
</q-btn>
</el-upload>
<div style="margin-top: 20px;">
(视频上传大小不超过10M，支持MP4格式)
......@@ -179,7 +188,124 @@
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="getcancel" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="savevideo()" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="savevideo()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
<!-- 小程序 -->
<div v-if="type==6">
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 850px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新建/修改小程序</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-8">
<div style="width: 100%;border: 1px solid #ffe1b6;
background: #fff1de;
padding: 10px;
margin-bottom: 20px;">
在企业微信里发送小程序（必须在微信公众平台通过审核和发布的），请先将其关联到企业微信，再到本系统添加该小程序，否则发送失败，客户接收不到。如果没有微信小程序，请前往微信小程序进行注册。
<a href="https://mp.weixin.qq.com/cgi-bin/wx" target="_blank"
style="color: #1890ff;">
立即前往
</a>
</div>
<q-select filled stack-label option-value="Id" option-label="Name"
v-model="addMsg.MediaGroupId" @input="$forceUpdate()" ref="Id"
:options="allclassifyList" label="分组" :dense="false" emit-value map-options />
<q-input filled clearable standout="bg-primary text-white"
v-model="addMsg.AppletModel.AppletId" @input="$forceUpdate()" label="小程序appID"
:rules="[val => !!val || '请输入小程序appID']" style="margin-top: 20px;" />
<q-input filled clearable standout="bg-primary text-white"
v-model="addMsg.AppletModel.Page" @input="$forceUpdate()" label="小程序路径"
:rules="[val => !!val || '请输入小程序路径']" style="margin-top: 10px;" />
<q-input filled clearable standout="bg-primary text-white"
v-model="addMsg.AppletModel.Title" @input="$forceUpdate()" label="添加标题"
:rules="[val => !!val || '请输入标题']" style="margin-top: 10px;" />
<div style="margin-top: 15px;">
<div style="width:70px">上传图片:</div>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader materialupload" action=""
:before-upload="uploadFile"
accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
:show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"
v-if=" addMsg.AppletModel.ImagePath==''"></i>
<q-img v-else :src="addMsg.AppletModel.ImagePath"
style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
</q-img>
</el-upload>
<div style="margin-top: 20px;">
(图片大小不超过1M，图片名不能重复，支持JPG，JPEG及PNG格式)
</div>
</div>
</div>
</div>
<div class="col-4">
<q-img src="../../../assets/images/example.png"
style="width: 244px;height: 287px;display: flex;"></q-img>
<div style="width: 244px;text-align: center;margin-top: 15px;">示例</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="getcancel" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="saveapplet()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
<!-- 文件素材 -->
<div v-if="type==7">
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;" class="addscfile">
<q-card-section>
<div class="text-h6">新建/修改文件素材</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
@input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false"
emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传文件:</div>
<div class="iconfontfile " v-if="addMsg.FileModel && addMsg.FileModel.FilePath!=''"
@click="showUpLoadFile(addMsg.FileModel)">
<i v-if="addMsg.FileModel.FilePath.substring(addMsg.FileModel.FilePath.lastIndexOf('.')+1,addMsg.FileModel.FilePath.length).toUpperCase()=='PDF'" class="iconfont icon-pdf"></i>
<i v-else-if="addMsg.FileModel.FilePath.substring(addMsg.FileModel.FilePath.lastIndexOf('.')+1,addMsg.FileModel.FilePath.length).toUpperCase()=='TXT'" class="iconfont icon-txt"></i>
<i v-else-if="addMsg.FileModel.FilePath.substring(addMsg.FileModel.FilePath.lastIndexOf('.')+1,addMsg.FileModel.FilePath.length).toUpperCase()=='DOCX' ||
addMsg.FileModel.FilePath.substring(addMsg.FileModel.FilePath.lastIndexOf('.')+1,addMsg.FileModel.FilePath.length).toUpperCase()=='DOC'
" class="iconfont icon-word"></i>
<i v-else class="iconfont icon-excel"></i>
</div>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
</q-btn>
</el-upload>
<div style="margin-top: 20px;">
(上传文件大小不超过20MB，支持DOC、DOCX、XLS、XLSX、CSV、PPT、PPTX、TXT、PDF及Xmind格式。)
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="getcancel" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="savefile()" />
</q-card-actions>
</q-card>
</q-dialog>
......@@ -254,18 +380,33 @@
Description: '',
ImgLink: '',
};
}else if (this.type == 4) {//音频
} else if (this.type == 4) {//音频
this.addMsg.AudioModel = {
AudioName: '',
AudioPath: '',
};
}else if (this.type == 5) {//视频
} else if (this.type == 5) {//视频
this.addMsg.VideoModel = {
VideoName: '',
VideoPath: '',
};
} else if (this.type == 6) {//小程序
this.addMsg.AppletModel = {
AppletId: '',
Page: '',
Title: '',
ImageName: '',
ImagePath: '',
};
} else if (this.type == 7) {//小程序
this.addMsg.FileModel = {
FileName: '',
FilePath: '',
};
}
},
setWeChat() {
setWeChatMediumInfo(this.addMsg).then(res => {
......@@ -312,9 +453,10 @@
this.setWeChat()
},
uploadFile(files) {//图片上传
if (this.type == 2 || this.type == 3) {//图文和图片的时候处理
if (this.type == 2 || this.type == 3 || this.type == 6) {//图文和图片、小程序的时候处理
let types = ['image/jpeg', 'image/jpg', 'image/png'];
const isImage = types.includes(files.type);
if (this.type == 2 || this.type == 3) {
const isLtSize = files.size / 1024 / 1024 < 2;
if (!isLtSize) {
this.$q.notify({
......@@ -324,6 +466,18 @@
})
return false;
}
} else {
const isLtSize = files.size / 1024 / 1024 < 1;
if (!isLtSize) {
this.$q.notify({
type: 'negative',
message: `上传图片大小不能超过 1MB!`,
position: 'top'
})
return false;
}
}
if (!isImage) {
this.$q.notify({
type: 'negative',
......@@ -333,12 +487,15 @@
} else {
wechatUploadSelfFile('wechatcatalogue', files, res => {
if (res.Code == 1) {
if(this.type == 2 ){
if (this.type == 2) {
this.addMsg.ImageModel.ImageName = res.FileName;
this.addMsg.ImageModel.ImagePath = res.FileUrl;
}else{
} else if (this.type == 3) {
this.addMsg.ImgTextModel.ImgName = res.FileName;
this.addMsg.ImgTextModel.ImgPath = res.FileUrl;
} else {
this.addMsg.AppletModel.ImageName = res.FileName;
this.addMsg.AppletModel.ImagePath = res.FileUrl;
}
this.$forceUpdate();
......@@ -346,7 +503,7 @@
})
}
}
if(this.type == 4){//音频上传
if (this.type == 4) {//音频上传
// 文件类型进行判断
const isAudio = files.type === "audio/mp3" || files.type === "audio/mpeg";
const isLt2M = files.size / 1024 / 1024 < 2;
......@@ -385,7 +542,7 @@
}
}
}
if(this.type == 5){//视频上传
if (this.type == 5) {//视频上传
// 文件类型进行判断
const isLt10M = files.size / 1024 / 1024 < 10;
console.log(files)
......@@ -413,10 +570,39 @@
}
})
}
if (this.type == 7) {//文件
const isLt20M = files.size / 1024 / 1024 < 20;
let ft = files.name.substring(files.name.lastIndexOf('.') + 1, files.name.length).toUpperCase();
let stringArr = 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF'
if (stringArr.indexOf(ft) == '-1') {
this.$q.notify({
type: 'negative',
message: `请上传正确的文件格式!`,
position: 'top'
})
return false;
}
if (!isLt20M) {
this.$q.notify({
type: 'negative',
message: `文件大小不能超过20MB哦!`,
position: 'top'
})
return false;
}
wechatUploadSelfFile('wechatcatalogue', files, res => {
if (res.Code == 1) {
console.log(res)
this.addMsg.FileModel.FileName = res.FileName;
this.addMsg.FileModel.FilePath = res.FileUrl;
this.$forceUpdate();
}
})
}
},
getTimes(file) {//获取音频妙数
var content = file;
let audioDuration= 0
let audioDuration = 0
//获取录音时长
var url = URL.createObjectURL(content);
//经测试，发现audio也可获取视频的时长
......@@ -447,7 +633,7 @@
this.setWeChat()
},
saveImagetext(){//图文提交
saveImagetext() {//图文提交
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
......@@ -480,11 +666,11 @@
})
return
}
var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
var objExp=new RegExp(Expression);
if(objExp.test(this.addMsg.ImgTextModel.ImgLink)){
var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
var objExp = new RegExp(Expression);
if (objExp.test(this.addMsg.ImgTextModel.ImgLink)) {
// plus.runtime.openWeb(this.link)
}else{
} else {
this.$q.notify({
type: 'negative',
message: `上传的链接开头非http或https`,
......@@ -495,7 +681,7 @@
this.setWeChat()
},
saveaudio(){//音频
saveaudio() {//音频
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
......@@ -514,7 +700,7 @@
}
this.setWeChat()
},
savevideo(){//视频
savevideo() {//视频
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
......@@ -532,7 +718,90 @@
return
}
this.setWeChat()
},
saveapplet() {//小程序
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
message: `请选择分组选择`,
position: 'top'
})
return
}
if (this.addMsg.AppletModel.AppletId == '') {
this.$q.notify({
type: 'negative',
message: `请填写小程序ID`,
position: 'top'
})
return
}
if (this.addMsg.AppletModel.Page == '') {
this.$q.notify({
type: 'negative',
message: `请填写路径`,
position: 'top'
})
return
}
if (this.addMsg.AppletModel.Title == '') {
this.$q.notify({
type: 'negative',
message: `请填写小程序标题`,
position: 'top'
})
return
}
if (this.addMsg.AppletModel.ImagePath == '') {
this.$q.notify({
type: 'negative',
message: `请填写上传图片`,
position: 'top'
})
return
}
this.setWeChat()
},
savefile() {//文件
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
message: `请选择分组选择`,
position: 'top'
})
return
}
if (this.addMsg.FileModel.FilePath == '') {
this.$q.notify({
type: 'negative',
message: `请上传文件`,
position: 'top'
})
return
}
this.setWeChat()
},
showUpLoadFile(i) {
// 文件类型进行判断
if (
i.FileName.substring(
i.FileName.lastIndexOf(".") + 1,
i.FileName.length
).toUpperCase() == "PDF" ||
i.FileName.substring(
i.FileName.lastIndexOf(".") + 1,
i.FileName.length
).toUpperCase() == "TXT"
) {
this.previewPDF(i.Url);
} else {
window.open(
"https://view.officeapps.live.com/op/view.aspx?src=" + i.FilePath
);
}
},
}
}
......@@ -627,4 +896,15 @@
text-overflow: ellipsis;
width: 208px;
}
.addscfile .icon-excel,
.addscfile .icon-pdf,
.addscfile .icon-txt,
.addscfile .icon-wenjian,
.addscfile .icon-yasuobao,
.addscfile .icon-shipin,
.addscfile .icon-word {
font-size: 38px;
color: green;
line-height: 75px;
}
</style>
\ No newline at end of file
src/components/enterprise/material/appletmaterial.vue
View file @ 623b19b2
<template>
<div class="appletmaterial" style="padding: 0;margin: 0;">
<div class="page-content">
<div>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="add" label="添加小程序"
@click="goadd()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;" v-if="dataList.length>0">
<q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="dataList[y].check = !dataList[y].check,$forceUpdate();">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
<span>{{x.UpdateTime}}</span>
<!-- <q-btn class="q-mr-md" label="编辑" size="xs" color="accent" style="margin-right: 0;" @click.stop="goedit(x)" /> -->
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i>
</div>
<q-img :src="x.AppletModel && x.AppletModel.ImagePath?x.AppletModel.ImagePath:''" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;">
{{x.AppletModel&& x.AppletModel.Title?x.AppletModel.Title:''}}
</div>
</q-img>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.UpdateByName}}</div>
<div class="onetext" style="margin-top: 5px;">分钟:{{x.MediumGroupName}}</div>
</q-card-section>
</q-card>
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
</div>
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
</div>
<div v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='6' @editsuccess="getchildren" :editobj='editobj' @getcancel='Isadd=false'></alladdsc>
</div>
</div>
</template>
<script>
import alladdsc from './allAddSC'
export default {
name: "appletmaterial",
components: {
alladdsc,
},
props: {
dataList: {
type: Array,
default: [],
},
allclassifyList:{
type: Array,
default: [],
}
},
data() {
return {
loading: false,
Isadd: false,
editobj:null
}
},
created() {
},
methods: {
goadd() {
this.Isadd = true;
this.editobj=null
},
goedit(row){
this.editobj= {}
this.editobj.Id = row.Id;
this.editobj.MediaGroupId = row.MediaGroupId;
this.editobj.Type = row.Type;
this.editobj.AppletModel = JSON.parse(JSON.stringify(row.AppletModel)) ;
this.Isadd = true
},
getchildren(){
this.$emit('editsuccess')
this.Isadd = false
},
}
}
</script>
<style>
.appletmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.appletmaterial .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.appletmaterial .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.appletmaterial .el-date-editor.el-input {
width: 100%;
}
.appletmaterial .el-date-editor.el-input input {
background-color: transparent !important;
}
.appletmaterial .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.appletmaterial .el-drawer.rtl {
overflow: inherit;
}
.appletmaterial .imgcard {
width: 240px;
margin: 0 15px 15px 0
}
.appletmaterial .imgstyle {
width: 100%;
height: 120px;
border-radius: 0;
}
.appletmaterial .onetext {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 208px;
}
</style>
\ No newline at end of file
src/components/enterprise/material/filematerial.vue
View file @ 623b19b2
......@@ -3,13 +3,14 @@
<div class="page-content">
<div>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="add" label="上传视频"
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="add" label="上传文件"
@click="goadd()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;">
<q-card class="imgcard" v-for="(x,y) in data" :key='y'
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;"
v-if="dataList.length>0">
<q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="data[y].check = !data[y].check">
@click="dataList[y].check = !dataList[y].check,$forceUpdate()">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
......@@ -19,155 +20,104 @@
@click.stop="goedit(x)"></i>
</div>
<div class="iconfontfile " v-if="x.Content!=''"
:class="x.Content.substring(x.Content.lastIndexOf('.')+1,x.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
@click="showUpLoadFile()">
<div class="iconfontfile " v-if="x.FileModel && x.FileModel.FilePath!=''"
@click.stop="showUpLoadFile(x.FileModel)">
<i v-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='PDF'"
class="iconfont icon-pdf"></i>
<i v-else-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='TXT'"
class="iconfont icon-txt"></i>
<i v-else-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='DOCX' ||
x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='DOC'
" class="iconfont icon-word"></i>
<i v-else class="iconfont icon-excel"></i>
</div>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.CreatorName}}</div>
<div class="onetext" style="margin-top: 5px;">来源:{{x.source}}</div>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.UpdateByName}}</div>
<div class="onetext" style="margin-top: 5px;">分组:{{x.MediumGroupName}}</div>
</q-card-section>
</q-card>
</div>
</div>
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新建图文</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="ID" option-label="Name" v-model="addMsg.classifyId"
ref="ID" :options="classifyList" label="分组" :dense="false" emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传文件:</div>
<div class="iconfontfile " v-if="addMsg.Url!=''"
:class="addMsg.Url.substring(addMsg.Url.lastIndexOf('.')+1,addMsg.Url.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
@click="showUpLoadFile()">
</div>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传"></q-btn>
</el-upload>
<div style="margin-top: 20px;">
(上传文件大小不超过20MB，支持DOC、DOCX、XLS、XLSX、CSV、PPT、PPTX、TXT、PDF及Xmind格式。)
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据
</div>
</div>
<div v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='7' @editsuccess="getchildren" :editobj='editobj'
@getcancel='Isadd=false'></alladdsc>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Isadd = false" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="submit()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
const addobj = { Id: 0, classifyId: '', Url: '', }
import alladdsc from './allAddSC'
export default {
name: "filematerial",
components: {
alladdsc,
},
props: {
dataList: {
type: Array,
default: [],
},
allclassifyList: {
type: Array,
default: [],
}
},
data() {
return {
loading: false,
Isadd: false,
data: [{
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060532494570000000006.docx',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060532494570000000006.docx',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060532494570000000006.docx',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
},],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 18,
},
classifyList: [
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
],
addMsg: Object.assign({}, addobj),
audioDuration: 0,
editobj: null
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e) {
},
methods: {
goadd() {
this.Isadd = true;
this.addMsg = Object.assign({}, addobj)
this.editobj = null
},
goedit(x) {
this.Isadd = true;
this.addMsg.Url = x.Content
goedit(row) {
this.editobj = {}
this.editobj.Id = row.Id;
this.editobj.MediaGroupId = row.MediaGroupId;
this.editobj.Type = row.Type;
this.editobj.FileModel = JSON.parse(JSON.stringify(row.FileModel));
this.Isadd = true
},
uploadFile(file) {
// 文件类型进行判断
const isLt20M = file.size / 1024 / 1024 < 20;
let ft = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length).toUpperCase();
let stringArr = 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF'
if (stringArr.indexOf(ft) == '-1') {
this.$q.notify({
type: 'negative',
message: `请上传正确的文件格式!`,
position: 'top'
})
return false;
}
if (!isLt20M) {
this.$q.notify({
type: 'negative',
message: `文件大小不能超过20MB哦!`,
position: 'top'
})
return false;
}
UploadSelfFile("course", file, res => {
if (res.Code == 1) {
this.addMsg.Url = res.FileUrl;
}
});
getchildren() {
this.$emit('editsuccess')
this.Isadd = false
},
submit() {//提交
showUpLoadFile(i) {
// 文件类型进行判断
if (
i.FileName.substring(
i.FileName.lastIndexOf(".") + 1,
i.FileName.length
).toUpperCase() == "PDF" ||
i.FileName.substring(
i.FileName.lastIndexOf(".") + 1,
i.FileName.length
).toUpperCase() == "TXT"
) {
this.previewPDF(i.Url);
} else {
window.open(
"https://view.officeapps.live.com/op/view.aspx?src=" + i.FilePath
);
}
},
}
}
......@@ -242,19 +192,17 @@
width: 260px;
}
.iconfontfile {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
color: #e95252 !important;
background-color: rgba(251, 251, 251, 0.9);
}
.icon-excel,
.icon-pdf {
text-align: center;
.filematerial .icon-excel,
.filematerial .icon-pdf,
.filematerial .icon-txt,
.filematerial .icon-wenjian,
.filematerial .icon-yasuobao,
.filematerial .icon-shipin,
.filematerial .icon-word {
font-size: 38px;
color: green;
line-height: 75px;
}
</style>
\ No newline at end of file
src/pages/enterprise/materialManage.vue
View file @ 623b19b2
......@@ -41,7 +41,7 @@
 <appletmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"></appletmaterial>
</div>
<div v-if="tabCheck=='7'">
 <filematerial></filematerial>
 <filematerial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"></filematerial>
</div>
</div>
<!-- <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount" :input="true" @input="changePage" /> -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment