Skip to content

G
gdtel-gztel-school-center-ui
Commit 178fcc12 by 黄森林
Options

二维码

parent e2f29d1e
Showing with 304 additions and 16 deletions
src/api/school-center/qrCode.js 0 → 100644
import {postAction,downFilePost} from '@/api/manage'
const prefix = '/manager/ciop';
let uploadPicture = (params) => postAction(prefix + "/QRCpde/picture" , params);
let listPicture = (params) => postAction(prefix + "/QRCpde/list" , params);
let deletePicture = (id,params) => postAction(prefix + "/QRCpde/deletePicture/"+id , params);
let updateEnable = (id,params) => postAction(prefix + "/QRCpde/updateEnable/"+id , params);
export {
uploadPicture,
listPicture,
deletePicture,
updateEnable
}
src/views/poster/PosterList.vue
<template> <template>
<div class="flex-container"> <div class="flex-container">
<!-- 查询区域 --> <!-- &lt;!&ndash; 查询区域 &ndash;&gt;
<a-upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
listType="picture"
@change="transformFile"
:beforeUpload="beforeUpload"
:showUploadList="false"
>
<a-button> <a-icon type="upload" />上传图片</a-button>
</a-upload>-->
<a-upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:beforeUpload="transformFile"
>
<a-button> <a-icon type="upload" /> 上传图片 </a-button>
</a-upload>
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<!-- 搜索区域 --> <!-- 搜索区域 -->
<a-form layout="inline">
</div>
<new-poster ref="model1"></new-poster>
<!--列表-->
<s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
<template slot="createTime" slot-scope="text">
{{ text | dayjs}}
</template>
<template slot="picture" slot-scope="text">
<img src="">
</template>
<template slot="enable" slot-scope="text">
<span v-if="text == 0">不启用</span>
<span v-if="text == 1">启用</span>
</template>
<template slot="operation" slot-scope="text">
<!-- <a-form layout="inline">
<a-row :gutter="24"> <a-row :gutter="24">
<span class="table-page-search-submitButtons" style="float: left; overflow: hidden;"> <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
<a-col :md="6" :sm="24"> <a-col :md="6" :sm="24">
<a-button @click="add()" type="primary">新建海报</a-button> <a-button @click="addPoster()" type="primary">新建海报</a-button>
</a-col> </a-col>
</span> </span>
</a-row> </a-row>
</a-form> </a-form>-->
</div>ß <span>
<new-poster ref="model1"></new-poster> <a @click="addPoster()">新建海报</a>
</span>
</template>
</s-table>
<!----弹框-->
<a-modal :title="add ?'添加大学宽带信息': '编辑大学宽带信息'" :visible="modifyvisible" @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="1024px">
</a-modal>
</div> </div>
</template> </template>
<script> <script>
import newPoster from "./newPoster"; import STable from '@/components/table';
export default { import {universityList,universityDelete,universityInsert,universityUpdate} from "@/api/school-center/productAPI"
import {uploadPicture} from "@/api/school-center/qrCode"
import {cloneObject} from '@/utils/util';
import newPoster from './newPoster'
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
export default {
name: "PosterList", name: "PosterList",
components: { newPoster }, components: {
compontents: { STable,newPoster
newPoster },
data(){
return {
pictureInfo:'',
Formtable: this.$form.createForm(this),
modifyvisible: false,
add: true,
queryParam: {
universityName :'', //学校
universityRegion :'', // 区域
}, },
data() { modelData:{
return {}; universityName:'',
universityRegion:'',
universityInstalledAddress:'',
universityExteriorLines:'',
universityPackageNumber:'',
universityInstalledAddressId:'',
universityUserType:'',
universityContactPhone:'',
universityMonthlyRentType:'',
universityChargeMode:'',
universityChargingAttribute:'',
speed:'',
publicNumber:'',
universityId:''
},
columns: [
{dataIndex: 'picture', title: '图片 ', scopedSlots: {customRender: 'picture'}},
{dataIndex: 'createTime', width: 150, title: '创建时间 ', scopedSlots: {customRender: 'createTime'}},
{dataIndex: 'enable', width: 50, title: '是否启用 ', scopedSlots: {customRender: 'enable'}},
{
dataIndex: 'operation',
width: 100,
title: '操作',
scopedSlots: {customRender: 'operation'},
fixed: "right"
}]
,
rowdata: parameter => {
let params = {
pageNo: parameter.pageNo,
pageSize: parameter.pageSize
}
let obj = cloneObject(this.queryParam)
//表示
return universityList(Object.assign(params,obj)).then(res => {
let data = {}
if (res.state !== 'success') {
data = {
data: [],
pageSize: parameter.pageSize,
pageNo: 1,
totalCount: 0
}
} else {
data = {
data: res.data.records,
pageSize: parameter.pageSize,
pageNo: parameter.pageNo,
totalCount: res.data.total
}
}
return data
})
}
}
},
methods:{
transformFile(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!');
return isJpgOrPng && isLt2M;
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
this.$message.error('文件不能超过5MB!');
return isJpgOrPng && isLt2M;
}
return new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const img = document.createElement('img');
img.src = reader.result;
img.onload = () => {
const limitWidth = arguments[2] ? arguments[2] : 640;
const width = img.width > limitWidth ? limitWidth : img.width;
const height = img.width > limitWidth ? parseInt((img.height * limitWidth) / img.width) : img.height;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width
canvas.height = height
ctx.fillStyle = '#fff'
ctx.fillRect(0,0,canvas.width,canvas.height)
ctx.drawImage(img,0,0,width,height)
const picture = canvas.toDataURL('image/jpeg')
return uploadPicture({picture}).then(res => {
if(res.state == 'error'){
this.$message.error(res.msg,5);
}
if(res.state == 'success'){
this.$message.success(res.data,5);
}
})
};
};
});
}, },
methods: { addPoster(){
add() {
this.$refs.model1.showModal(); this.$refs.model1.showModal();
},
search() {
this.$refs.table.refresh({search: true})
},
uploadPicture(){
},
beforeUpload(file) {
},
remove(id) {
universityDelete(id).then((res) => {
if(res.state=="success"){
this.$notification.success({message: res.data, description: '', duration: 4})
}
this.$refs.table.refresh({search: true})
})
},
modifyfunction(data){
if(data != undefined ){
setTimeout(()=>{
this.modelData.universityId=data.universityId
this.Formtable.setFieldsValue({
"universityName":data.universityName,
"universityRegion":data.universityRegion,
"universityInstalledAddress":data.universityInstalledAddress,
"universityExteriorLines":data.universityExteriorLines,
"universityPackageNumber":data.universityPackageNumber,
"universityInstalledAddressId":data.universityInstalledAddressId,
"universityUserType":data.universityUserType,
"universityContactPhone":data.universityContactPhone,
"universityMonthlyRentType":data.universityMonthlyRentType,
"universityChargeMode":data.universityChargeMode,
"universityChargingAttribute":data.universityChargingAttribute,
"speed":data.speed,
"publicNumber":data.publicNumber
})
},0)
this.add=false;
}
this.modifyvisible=true;
},
createfunctionOk(){
let that = this;
that.Formtable.validateFields(['universityName','universityRegion','universityInstalledAddress','universityExteriorLines','universityPackageNumber','universityInstalledAddressId','universityUserType',
'universityContactPhone','universityMonthlyRentType','universityChargeMode','universityChargingAttribute','speed','publicNumber'], {force: true}, (err, values) => {
if (err ) {
return;
}
that.modelData.universityName=values.universityName
that.modelData.universityRegion=values.universityRegion
that.modelData.universityInstalledAddress=values.universityInstalledAddress
that.modelData.universityExteriorLines=values.universityExteriorLines
that.modelData.universityPackageNumber=values.universityPackageNumber
that.modelData.universityInstalledAddressId=values.universityInstalledAddressId
that.modelData.universityUserType=values.universityUserType
that.modelData.universityContactPhone=values.universityContactPhone
that.modelData.universityMonthlyRentType=values.universityMonthlyRentType
that.modelData.universityChargeMode=values.universityChargeMode
that.modelData.universityChargingAttribute=values.universityChargingAttribute
that.modelData.speed=values.speed
that.modelData.publicNumber=values.publicNumber
if(this.add){
let obj= that.modelData;
delete obj.universityId
let university= JSON.stringify(obj);
universityInsert({university}).then((res) => {
this.modifyvisible=false;
this.clearmodel()
if(res.state=="success"){
this.$notification.success({message: res.data, description: '', duration: 4})
}
this.search()
})
}else {
let obj= that.modelData;
let university= JSON.stringify(obj);
universityUpdate({university}).then((res) => {
this.modifyvisible=false;
this.clearmodel()
if(res.state=="success"){
this.$notification.success({message: res.data, description: '', duration: 4})
}
this.search()
})
}
})
},
createfunctionCancel(){
this.modifyvisible=false;
this.clearmodel()
this.add=true;
},
//清除弹窗信息
clearmodel() {
this.add=true
this.modelData.universityId=''
this.Formtable.setFieldsValue({
"universityName":'',
"universityRegion":'',
"universityInstalledAddress":'',
"universityExteriorLines":'',
"universityPackageNumber":'',
"universityInstalledAddressId":'',
"universityUserType":'',
"universityContactPhone":'',
"universityMonthlyRentType":'',
"universityChargeMode":'',
"universityChargingAttribute":'',
"speed":'',
"publicNumber":''
})
}
} }
} }
};
</script> </script>
<style scoped> <style scoped>
</style> </style>
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