Skip to content

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

图文

parent 5191ca5c
Show 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 @@ ...@@ -11,9 +11,9 @@
<q-card-section class="q-pt-none" style="margin-top: 15px;"> <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" <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 /> 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;" /> 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;" /> type="textarea" label="文本内容" style="margin-top: 20px;" />
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
...@@ -61,6 +61,51 @@ ...@@ -61,6 +61,51 @@
</q-card> </q-card>
</q-dialog> </q-dialog>
</div> </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> </div>
...@@ -102,8 +147,6 @@ ...@@ -102,8 +147,6 @@
} }
}, },
created() { created() {
this.addMsg.Type = this.type
if (this.editobj != null) { if (this.editobj != null) {
this.addMsg = this.editobj this.addMsg = this.editobj
} else { } else {
...@@ -120,11 +163,19 @@ ...@@ -120,11 +163,19 @@
Title: '', Title: '',
Content: '' Content: ''
}; };
} else if(this.type == 2) {//图片 } else if (this.type == 2) {//图片
this.addMsg.ImageModel = { this.addMsg.ImageModel = {
ImageName: '', ImageName: '',
ImagePath: '' ImagePath: ''
}; };
} else if (this.type == 3) {//图文
this.addMsg.ImgTextModel = {
ImgName: '',
ImgPath: '',
Title: '',
Description: '',
ImgLink: '',
};
} }
}, },
setWeChat() { setWeChat() {
...@@ -147,7 +198,7 @@ ...@@ -147,7 +198,7 @@
if (this.addMsg.MediaGroupId == '') { if (this.addMsg.MediaGroupId == '') {
this.$q.notify({ this.$q.notify({
type: 'negative', type: 'negative',
message: `分组选择`, message: `请选择分组选择`,
position: 'top' position: 'top'
}) })
return return
...@@ -172,6 +223,7 @@ ...@@ -172,6 +223,7 @@
this.setWeChat() this.setWeChat()
}, },
uploadFile(files) {//图片上传 uploadFile(files) {//图片上传
if (this.type == 2 || this.type == 3) {//图文和图片的时候处理
let types = ['image/jpeg', 'image/jpg', 'image/png']; let types = ['image/jpeg', 'image/jpg', 'image/png'];
const isImage = types.includes(files.type); const isImage = types.includes(files.type);
const isLtSize = files.size / 1024 / 1024 < 2; const isLtSize = files.size / 1024 / 1024 < 2;
...@@ -190,22 +242,30 @@ ...@@ -190,22 +242,30 @@
position: 'top' position: 'top'
}) })
} else { } else {
wechatUploadSelfFile('wechatcatalogue',files,res=>{ wechatUploadSelfFile('wechatcatalogue', files, res => {
if (res.Code == 1) { if (res.Code == 1) {
if(this.type == 2 ){
this.addMsg.ImageModel.ImageName = res.FileName; this.addMsg.ImageModel.ImageName = res.FileName;
this.addMsg.ImageModel.ImagePath = res.FileUrl; this.addMsg.ImageModel.ImagePath = res.FileUrl;
}else{
this.addMsg.ImgTextModel.ImgName = res.FileName;
this.addMsg.ImgTextModel.ImgPath = res.FileUrl;
}
this.$forceUpdate(); this.$forceUpdate();
} }
}) })
} }
}
}, },
saveImage(){ saveImage() {//图片提交
if (this.addMsg.MediaGroupId == '') { if (this.addMsg.MediaGroupId == '') {
this.$q.notify({ this.$q.notify({
type: 'negative', type: 'negative',
message: `分组选择`, message: `请选择分组选择`,
position: 'top' position: 'top'
}) })
return return
...@@ -220,6 +280,54 @@ ...@@ -220,6 +280,54 @@
} }
this.setWeChat() this.setWeChat()
},
saveImagetext(){//图文提交
if (this.addMsg.MediaGroupId == '') {
this.$q.notify({
type: 'negative',
message: `请选择分组选择`,
position: 'top'
})
return
}
if (this.addMsg.ImgTextModel.ImgPath == '') {
this.$q.notify({
type: 'negative',
message: `请上传图片`,
position: 'top'
})
return
}
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 @@ ...@@ -19,7 +19,7 @@
</div> </div>
<q-img :src="x.ImageModel && x.ImageModel.ImagePath?x.ImageModel.ImagePath:''" class="imgstyle"> <q-img :src="x.ImageModel && x.ImageModel.ImagePath?x.ImageModel.ImagePath:''" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext" <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}} {{x.ImageModel.ImageName}}
</div> </div>
</q-img> </q-img>
......
src/components/enterprise/material/imgtextmaterial.vue
View file @ a9c0e924
...@@ -18,68 +18,28 @@ ...@@ -18,68 +18,28 @@
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;" <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i> @click.stop="goedit(x)"></i>
</div> </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" <div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;"> style="padding: 0;padding: 0 5px;font-size: 12px;">
{{x.title}} {{x.ImgTextModel.Title}}
</div> </div>
</q-img> </q-img>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.CreatorName}}</div> <div class="onetext" style="margin-top: 5px;">上传者:{{x.UpdateByName}}</div>
<div class="onetext" style="margin-top: 5px;">来源:{{x.source}}</div> <div class="onetext" style="margin-top: 5px;">分钟:{{x.MediumGroupName}}</div>
</q-card-section> </q-card-section>
</q-card> </q-card>
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div> <div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
</div> </div>
</div> </div>
<q-dialog v-model="Isadd" persistent> <div v-if="Isadd==true">
<q-card style="width: 520px; max-width: 80vw;"> <alladdsc :allclassifyList="allclassifyList" type='3' @editsuccess="getchildren" :editobj='editobj' @getcancel='Isadd=false'></alladdsc>
<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> </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> </div>
</template> </template>
<script> <script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
import alladdsc from './allAddSC' import alladdsc from './allAddSC'
export default { export default {
name: "imgtextmaterial", name: "imgtextmaterial",
...@@ -104,7 +64,6 @@ ...@@ -104,7 +64,6 @@
} }
}, },
created() { created() {
}, },
methods: { methods: {
...@@ -118,9 +77,8 @@ ...@@ -118,9 +77,8 @@
this.editobj.Id = row.Id; this.editobj.Id = row.Id;
this.editobj.MediaGroupId = row.MediaGroupId; this.editobj.MediaGroupId = row.MediaGroupId;
this.editobj.Type = row.Type; 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 this.Isadd = true
console.log(row)
}, },
getchildren(){ getchildren(){
this.$emit('editsuccess') 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