9c7377d9 by 杨威
2 parents c2a10fc8 84e6cb3e
<template>
<div class="printTemplate">
<el-form :rules="rules" :model="formData" ref="printForm" label-width="80px">
<el-form-item label="标题:" prop="title">
<el-input v-model="formData.title"></el-input>
</el-form-item>
<el-form-item label="格式:" prop="format">
<el-select v-model="formData.format" placeholder="请选择格式">
<el-option
v-for="(item,index) in formats"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="模板:" prop="layOut">
<el-select v-model="formData.layOut" placeholder="请选择格式">
<el-option
v-for="(item,index) in layouts"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="formData.author"></el-input>
</el-form-item>
<el-form-item v-show="!isSuccess">
<el-button type="primary" @click="onSubmit('printForm')">确定</el-button>
<el-button @click="resetForm('printForm')">重置</el-button>
</el-form-item>
<el-form-item v-show="isSuccess">
<el-button type="primary" @click="showResult">预览</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import mapTools from './js/mapTools.js'
export default{
props:{
viewId:{
type:String,
default:""
}
},
mixins:[mapTools],
data(){
return{
formData:{
title:"地图",
author:"",
layOut:"map-only",
format:"png32"
},
formats:[
"pdf","png32","png8","jpg","gif","eps","svg","svgz"
],
layouts:[
{
label:"仅地图",
value:"map-only"
},
{
label:"A3横向",
value:"a3-landscape"
},
{
label:"A3纵向",
value:"a3-portrait"
},
{
label:"A4横向",
value:"a4-landscape"
},
{
label:"A4纵向",
value:"a4-portrait"
},
{
label:"letter横向",
value:"letter-ansi-a-landscape"
},
{
label:"letter纵向",
value:"letter-ansi-a-portrait"
},
{
label:"B开横向",
value:"tabloid-ansi-b-landscape"
},
{
label:"B纵向",
value:"tabloid-ansi-b-portrait"
}
],
rules:{
title: [
{ required: true, message: '请输入标题' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符' }
],
author:[
{ min: 2, max: 10, message: '长度在 2 到 10 个字符' }
],
layOut:[
{ required: true, message: '请选择模板' }
],
format:[
{ required: true, message: '请选择格式' }
]
},
serverUrl:"http://192.168.2.201:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
isSuccess:false,
retrurnUrl:""
}
},
mounted(){
this.initData();
},
methods:{
initData(){
this.isSuccess = false;
this.retrurnUrl = "";
this.formData = {
title:"地图",
author:"",
layOut:"map-only",
format:"png32"
}
},
onSubmit(formName){
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
this.printMap(this.viewId,null,this.serverUrl,this.formData,function(res){
if(res.url){
self.isSuccess = true;
self.retrurnUrl = res.url;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
showResult(){
window.open(this.retrurnUrl);
this.isSuccess = false;
},
resetForm(formName) {
this.formData = {
title:"地图",
author:"",
layOut:"map-only",
format:"png32"
}
}
}
}
</script>
<style scoped lang="less">
</style>