Skip to content

G
gdtel-gztel-school-center-ui
Commit 7fe6c730 by 黄森林
Options

海报管理完成

parent 40a6b911
Showing with 76 additions and 34 deletions
src/components/sysmanage/codeMove.vue
...@@ -76,8 +76,8 @@ export default { ...@@ -76,8 +76,8 @@ export default {
if(left<0){ if(left<0){
left = 0; left = 0;
} }
if(left+this.width > 300){ if(left+this.width > 500){
left = 300-this.width; left = 500-this.width;
} }
if(top<0){ if(top<0){
top = 0; top = 0;
......
src/views/poster/PosterList.vue
...@@ -31,19 +31,19 @@ ...@@ -31,19 +31,19 @@
<!--列表--> <!--列表-->
<s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling"> <s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
<template slot="createTime" slot-scope="text"> <template slot="createTime" slot-scope="text">
{{ text | dayjs}} {{ text | dayjs}}
</template> </template>
<template slot="picture" slot-scope="text"> <template slot="picture" slot-scope="text">
<!--<img :src="text">--> <img :src="text" @click="imgClick(text)">
<img style="height: 50px" src="http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png"> <!--<img @click="imgClick('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')" style="height: 50px" src="http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png">
</template> --> </template>
<template slot="enable" slot-scope="text"> <template slot="enable" slot-scope="text">
<span v-if="text == 0">不启用</span> <span v-if="text == 0">不启用</span>
<span v-if="text == 1">启用</span> <span v-if="text == 1">启用</span>
</template> </template>
<template slot="operation" slot-scope="text, record"> <template slot="operation" slot-scope="text, record">
<span> <span>
<a @click="addPoster(record.picture)">新建海报</a> <a @click="addPoster(record.picture,record.userId)">新建海报</a>
<a-divider type="vertical"/> <a-divider type="vertical"/>
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)"> <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
<a>删除</a> <a>删除</a>
...@@ -60,6 +60,19 @@ ...@@ -60,6 +60,19 @@
<a-modal :title="add ?'添加大学宽带信息': '编辑大学宽带信息'" :visible="modifyvisible" @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="1024px"> <a-modal :title="add ?'添加大学宽带信息': '编辑大学宽带信息'" :visible="modifyvisible" @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="1024px">
</a-modal> </a-modal>
<a-drawer
title="海报图片"
placement="right"
:closable="false"
@close="pictureOnClose"
:visible="visiblepicture"
width="50%"
>
<div >
<img class="bg-img" :src="imgInfo">
</div>
</a-drawer>
</div> </div>
</template> </template>
...@@ -69,11 +82,6 @@ ...@@ -69,11 +82,6 @@
import {listPicture,uploadPicture,deletePicture,updateEnable} from "@/api/school-center/qrCode" import {listPicture,uploadPicture,deletePicture,updateEnable} from "@/api/school-center/qrCode"
import {cloneObject} from '@/utils/util'; import {cloneObject} from '@/utils/util';
import newPoster from './newPoster' import newPoster from './newPoster'
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
export default { export default {
name: "PosterList", name: "PosterList",
...@@ -82,6 +90,8 @@ ...@@ -82,6 +90,8 @@
}, },
data(){ data(){
return { return {
imgInfo:'',
visiblepicture:false,
pictureInfo:'', pictureInfo:'',
Formtable: this.$form.createForm(this), Formtable: this.$form.createForm(this),
modifyvisible: false, modifyvisible: false,
...@@ -106,16 +116,17 @@ ...@@ -106,16 +116,17 @@
universityId:'' universityId:''
}, },
columns: [ columns: [
{dataIndex: 'picture', title: '图片 ', scopedSlots: {customRender: 'picture'}}, {dataIndex: 'picture', title: '图片 ', scopedSlots: {customRender: 'picture'},align: 'center'},
{dataIndex: 'createName', width: 100, title: '创建人'}, {dataIndex: 'createName', width: 100, title: '创建人',align: 'center'},
{dataIndex: 'createTime', width: 100, title: '创建时间 ', scopedSlots: {customRender: 'createTime'}}, {dataIndex: 'createTime', width: 100, title: '创建时间 ', scopedSlots: {customRender: 'createTime'},align: 'center'},
{dataIndex: 'enable', width: 50, title: '启用状态', scopedSlots: {customRender: 'enable'}}, {dataIndex: 'enable', width: 50, title: '启用状态', scopedSlots: {customRender: 'enable'},align: 'center'},
{ {
dataIndex: 'operation', dataIndex: 'operation',
width: 100, width: 100,
title: '操作', title: '操作',
scopedSlots: {customRender: 'operation'}, scopedSlots: {customRender: 'operation'},
fixed: "right" fixed: "right",
align: 'center'
}] }]
, ,
rowdata: parameter => { rowdata: parameter => {
...@@ -147,6 +158,14 @@ ...@@ -147,6 +158,14 @@
} }
}, },
methods:{ methods:{
pictureOnClose() {
this.imgInfo=''
this.visiblepicture = false;
},
imgClick(res){
this.imgInfo=res
this.visiblepicture=true
},
uploadPicture(file) { uploadPicture(file) {
return new Promise(resolve => { return new Promise(resolve => {
const reader = new FileReader(); const reader = new FileReader();
...@@ -179,9 +198,10 @@ ...@@ -179,9 +198,10 @@
}; };
}); });
}, },
addPoster(picture){ addPoster(picture,id){
picture = 'http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png' /* picture = 'http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png'*/
this.$refs.model1.showModal(picture); let url = 'http://hhrcode.winsun-aly.com/#/hhr/home?id='+id
this.$refs.model1.showModal(picture,url);
}, },
search() { search() {
this.$refs.table.refresh({search: true}) this.$refs.table.refresh({search: true})
...@@ -314,6 +334,10 @@ ...@@ -314,6 +334,10 @@
} }
</script> </script>
<style scoped> <style scoped lang="less">
.bg-img {
margin-left: 20%;
width: 60%;
}
</style> </style>
src/views/poster/newPoster.vue
<template> <template>
<a-drawer <a-drawer
title="海报创建" title="二维码创建"
placement="right" placement="right"
:closable="true" :closable="true"
:visible="visible" :visible="visible"
@close="onClose" @close="onClose"
width="100%" width="50%"
:bodyStyle="{'padding':0}" :bodyStyle="{'padding':0}"
destroyOnClose destroyOnClose
> >
...@@ -16,15 +16,15 @@ ...@@ -16,15 +16,15 @@
<span>选择图片</span> <span>选择图片</span>
<input ref="selectImgae" class="seletImg" type="file" @change="selectImage" /> <input ref="selectImgae" class="seletImg" type="file" @change="selectImage" />
</div>--> </div>-->
<a-button @click="toImage" v-if="images != ''">生成图片</a-button> <a-button type="primary" @click="toImage" v-if="images != ''">生成图片</a-button>
<a-divider type="vertical"/> <!-- <a-divider type="vertical"/>
<a-button @click="newCode" v-if="images != ''">生成二维码</a-button> <a-button @click="newCode" v-if="images != ''">生成二维码</a-button>-->
</a-col> </a-col>
<a-col :span="6" v-if="images!=''"> <!--<a-col :span="6" v-if="images!=''">
<a-form-item label="二维码内容：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"> <a-form-item label="二维码内容：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input v-model="codeText"></a-input> <a-input v-model="codeText"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>-->
<a-col :span="9" v-if="images!=''"> <a-col :span="9" v-if="images!=''">
<a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"> <a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-slider id="code" v-model="codeWidth" :max="300" /> <a-slider id="code" v-model="codeWidth" :max="300" />
...@@ -37,6 +37,19 @@ ...@@ -37,6 +37,19 @@
<code-move ref="code" :width="codeWidth"></code-move> <code-move ref="code" :width="codeWidth"></code-move>
<img class="bg-img" :src="images" /> <img class="bg-img" :src="images" />
</div> </div>
<a-divider />
</div>
<div style="margin-left: 10%">
<h2>使用说明</h2>
<h3>
1.使用鼠标可拖动二维码放置在图片内任何地方（注意：二维码位置不可超出图片范围）
</h3>
<h3>
2.使用图片上方的滑动条可以调节二维码大小
</h3>
<h3>
3.使用图片上方的生成图片按钮可以下载调节好的二维码图片
</h3>
</div> </div>
</a-drawer> </a-drawer>
</template> </template>
...@@ -58,16 +71,21 @@ export default { ...@@ -58,16 +71,21 @@ export default {
}; };
}, },
methods: { methods: {
showModal(picture) { showModal(picture,url) {
//picture = picture.replace('http://yrym.winsun-aly.com','/api'); /* picture = picture.replace('http://yrym.winsun-aly.com','/api');*/
this.codeText=url
this.getBase64(picture, 'jpeg', (base64) =>{ this.getBase64(picture, 'jpeg', (base64) =>{
// 给原生img对象的src属性赋值 // 给原生img对象的src属性赋值
this.images=base64; this.images=base64;
this.visible = true; this.visible = true;
}); });
setTimeout(() =>{
this.newCode()
},5);
}, },
onClose() { onClose() {
this.visible = false; this.visible = false;
this.codeWidth=150
}, },
selectImage() { selectImage() {
let file = this.$refs.selectImgae; let file = this.$refs.selectImgae;
...@@ -180,7 +198,7 @@ export default { ...@@ -180,7 +198,7 @@ export default {
} }
.image-box { .image-box {
width: 300px; width: 500px;
height: auto; height: auto;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
......
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