Skip to content

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

二维码

parent e2f29d1e
Showing with 318 additions and 30 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>
<div class="flex-container">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<!-- 搜索区域 -->
<a-form layout="inline">
<a-row :gutter="24">
<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>
<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">
<span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
<a-col :md="6" :sm="24">
<a-button @click="add()" type="primary">新建海报</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>ß
<new-poster ref="model1"></new-poster>
</div>
<a-col :md="6" :sm="24">
<a-button @click="addPoster()" type="primary">新建海报</a-button>
</a-col>
</span>
</a-row>
</a-form>-->
<span>
<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>
</template>
<script>
import newPoster from "./newPoster";
export default {
name: "PosterList",
components: { newPoster },
compontents: {
newPoster
},
data() {
return {};
},
methods: {
add() {
this.$refs.model1.showModal();
import STable from '@/components/table';
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",
components: {
STable,newPoster
},
data(){
return {
pictureInfo:'',
Formtable: this.$form.createForm(this),
modifyvisible: false,
add: true,
queryParam: {
universityName :'', //学校
universityRegion :'', // 区域
},
modelData:{
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);
}
})
};
};
});
},
addPoster(){
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>
<style scoped>
</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