Skip to content

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

图文

parent 5191ca5c
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 79 deletions
src/components/enterprise/material/allAddSC.vue
View file @ a9c0e924
......@@ -11,9 +11,9 @@
<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"
ref="ID" :options="allclassifyList" label="分组" :dense="false" emit-value map-options />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.TextModel.Title"
<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"
<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 />
......@@ -61,13 +61,58 @@
</q-card>
</q-dialog>
</div>
<!-- 图文 -->
<div v-if="type==3">
<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.MediaGroupId"
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;">
<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.ImgTextModel.ImgPath==''"></i>
<q-img v-else :src="addMsg.ImgTextModel.ImgPath"
style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
</q-img>
</el-upload>
<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()"
label="请输入跳转链接，且必须以http://或https://开头" style="margin-top: 20px;"
:rules="[ val => !!val || '请输入跳转链接']" />
</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="saveImagetext()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</div>
</template>
<script>
import {
import {
wechatUploadSelfFile
} from "../../../api/common/common"; //上传图片
import {
......@@ -102,8 +147,6 @@
}
},
created() {
this.addMsg.Type = this.type
if (this.editobj != null) {
this.addMsg = this.editobj
} else {
......@@ -120,11 +163,19 @@
Title: '',
Content: ''
};
} else if(this.type == 2) {//图片
} else if (this.type == 2) {//图片
this.addMsg.ImageModel = {
ImageName: '',
ImagePath: ''
};
} else if (this.type == 3) {//图文
this.addMsg.ImgTextModel = {
ImgName: '',
ImgPath: '',
Title: '',
Description: '',
ImgLink: '',
};
}
},
setWeChat() {
......@@ -147,7 +198,7 @@
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
message: `分组选择`,
message: `请选择分组选择`,
position: 'top'
})
return
......@@ -172,45 +223,74 @@
this.setWeChat()
},
uploadFile(files) {//图片上传
let types = ['image/jpeg', 'image/jpg', 'image/png'];
const isImage = types.includes(files.type);
const isLtSize = files.size / 1024 / 1024 < 2;
if (!isLtSize) {
if (this.type == 2 || this.type == 3) {//图文和图片的时候处理
let types = ['image/jpeg', 'image/jpg', 'image/png'];
const isImage = types.includes(files.type);
const isLtSize = files.size / 1024 / 1024 < 2;
if (!isLtSize) {
this.$q.notify({
type: 'negative',
message: `上传图片大小不能超过 2MB!`,
position: 'top'
})
return false;
}
if (!isImage) {
this.$q.notify({
type: 'negative',
message: `上传图片只能是 JPG、JPEG、PNG 格式!`,
position: 'top'
})
} else {
wechatUploadSelfFile('wechatcatalogue', files, res => {
if (res.Code == 1) {
if(this.type == 2 ){
this.addMsg.ImageModel.ImageName = res.FileName;
this.addMsg.ImageModel.ImagePath = res.FileUrl;
}else{
this.addMsg.ImgTextModel.ImgName = res.FileName;
this.addMsg.ImgTextModel.ImgPath = res.FileUrl;
}
this.$forceUpdate();
}
})
}
}
},
saveImage() {//图片提交
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
message: `上传图片大小不能超过 2MB!`,
message: `请选择分组选择`,
position: 'top'
})
return false;
return
}
if (!isImage) {
if (this.addMsg.ImageModel.ImagePath == '') {
this.$q.notify({
type: 'negative',
message: `上传图片只能是 JPG、JPEG、PNG 格式!`,
message: `请上传图片`,
position: 'top'
})
} else {
wechatUploadSelfFile('wechatcatalogue',files,res=>{
if (res.Code == 1) {
this.addMsg.ImageModel.ImageName = res.FileName;
this.addMsg.ImageModel.ImagePath = res.FileUrl;
this.$forceUpdate();
}
})
return
}
this.setWeChat()
},
saveImage(){
saveImagetext(){//图文提交
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
message: `分组选择`,
message: `请选择分组选择`,
position: 'top'
})
return
}
if (this.addMsg.ImageModel.ImagePath == '') {
if (this.addMsg.ImgTextModel.ImgPath == '') {
this.$q.notify({
type: 'negative',
message: `请上传图片`,
......@@ -218,8 +298,36 @@
})
return
}
this.setWeChat()
if (this.addMsg.ImgTextModel.Title == '') {
this.$q.notify({
type: 'negative',
message: `请填写标题`,
position: 'top'
})
return
}
if (this.addMsg.ImgTextModel.ImgLink == '') {
this.$q.notify({
type: 'negative',
message: `请填写跳转链接`,
position: 'top'
})
return
}
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{
this.$q.notify({
type: 'negative',
message: `上传的链接开头非http或https`,
position: 'top'
})
return
}
this.setWeChat()
}
}
......
src/components/enterprise/material/imgmaterial.vue
View file @ a9c0e924
......@@ -19,7 +19,7 @@
</div>
<q-img :src="x.ImageModel && x.ImageModel.ImagePath?x.ImageModel.ImagePath:''" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;" v-if='x.ImageModel'>
style="padding: 0;padding: 0 5px;font-size: 12px;" >
{{x.ImageModel.ImageName}}
</div>
</q-img>
......
src/components/enterprise/material/imgtextmaterial.vue
View file @ a9c0e924
......@@ -18,68 +18,28 @@
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i>
</div>
<q-img :src="x.Content" class="imgstyle">
<q-img :src="x.ImgTextModel && x.ImgTextModel.ImgPath?x.ImgTextModel.ImgPath:''" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;">
{{x.title}}
{{x.ImgTextModel.Title}}
</div>
</q-img>
<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 style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
</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 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.img==''"></i>
<q-img v-else :src="addMsg.img"
style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
</q-img>
</el-upload>
<div style="margin-top: 20px;">
图片大小不超过2M，图片名不能重复，支持JPG，JPEG及PNG格式
</div>
<q-input clearable standout="bg-primary text-white" v-model="addMsg.title" label="添加标题"
style="margin-top: 20px;" />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.content" type="textarea"
label="添加描述" style="margin-top: 20px;" />
<q-input clearable standout="bg-primary text-white" v-model="addMsg.link"
label="请输入跳转链接，且必须以http://或https://开头" style="margin-top: 20px;" />
</div>
</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 v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='3' @editsuccess="getchildren" :editobj='editobj' @getcancel='Isadd=false'></alladdsc>
</div>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
import alladdsc from './allAddSC'
export default {
name: "imgtextmaterial",
......@@ -104,7 +64,6 @@
}
},
created() {
},
methods: {
......@@ -118,9 +77,8 @@
this.editobj.Id = row.Id;
this.editobj.MediaGroupId = row.MediaGroupId;
this.editobj.Type = row.Type;
this.editobj.ImageModel = JSON.parse(JSON.stringify(row.ImageModel)) ;
this.editobj.ImgTextModel = JSON.parse(JSON.stringify(row.ImgTextModel)) ;
this.Isadd = true
console.log(row)
},
getchildren(){
this.$emit('editsuccess')
......
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