工具条功能更新

+<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>