Merge branch 'master' of http://yun.pashanhoo.com:9090/renchao/CadastralSystem
Showing
1 changed file
with
167 additions
and
0 deletions
1 | <template> | ||
2 | <div class="printTemplate"> | ||
3 | <el-form :rules="rules" :model="formData" ref="printForm" label-width="80px"> | ||
4 | <el-form-item label="标题:" prop="title"> | ||
5 | <el-input v-model="formData.title"></el-input> | ||
6 | </el-form-item> | ||
7 | <el-form-item label="格式:" prop="format"> | ||
8 | <el-select v-model="formData.format" placeholder="请选择格式"> | ||
9 | <el-option | ||
10 | v-for="(item,index) in formats" | ||
11 | :key="index" | ||
12 | :label="item" | ||
13 | :value="item"> | ||
14 | </el-option> | ||
15 | </el-select> | ||
16 | </el-form-item> | ||
17 | <el-form-item label="模板:" prop="layOut"> | ||
18 | <el-select v-model="formData.layOut" placeholder="请选择格式"> | ||
19 | <el-option | ||
20 | v-for="(item,index) in layouts" | ||
21 | :key="index" | ||
22 | :label="item.label" | ||
23 | :value="item.value"> | ||
24 | </el-option> | ||
25 | </el-select> | ||
26 | </el-form-item> | ||
27 | <el-form-item label="作者" prop="author"> | ||
28 | <el-input v-model="formData.author"></el-input> | ||
29 | </el-form-item> | ||
30 | <el-form-item v-show="!isSuccess"> | ||
31 | <el-button type="primary" @click="onSubmit('printForm')">确定</el-button> | ||
32 | <el-button @click="resetForm('printForm')">重置</el-button> | ||
33 | </el-form-item> | ||
34 | <el-form-item v-show="isSuccess"> | ||
35 | <el-button type="primary" @click="showResult">预览</el-button> | ||
36 | </el-form-item> | ||
37 | </el-form> | ||
38 | </div> | ||
39 | </template> | ||
40 | |||
41 | <script> | ||
42 | import mapTools from './js/mapTools.js' | ||
43 | export default{ | ||
44 | props:{ | ||
45 | viewId:{ | ||
46 | type:String, | ||
47 | default:"" | ||
48 | } | ||
49 | }, | ||
50 | mixins:[mapTools], | ||
51 | data(){ | ||
52 | return{ | ||
53 | formData:{ | ||
54 | title:"地图", | ||
55 | author:"", | ||
56 | layOut:"map-only", | ||
57 | format:"png32" | ||
58 | }, | ||
59 | formats:[ | ||
60 | "pdf","png32","png8","jpg","gif","eps","svg","svgz" | ||
61 | ], | ||
62 | layouts:[ | ||
63 | { | ||
64 | label:"仅地图", | ||
65 | value:"map-only" | ||
66 | }, | ||
67 | { | ||
68 | label:"A3横向", | ||
69 | value:"a3-landscape" | ||
70 | }, | ||
71 | { | ||
72 | label:"A3纵向", | ||
73 | value:"a3-portrait" | ||
74 | }, | ||
75 | { | ||
76 | label:"A4横向", | ||
77 | value:"a4-landscape" | ||
78 | }, | ||
79 | { | ||
80 | label:"A4纵向", | ||
81 | value:"a4-portrait" | ||
82 | }, | ||
83 | { | ||
84 | label:"letter横向", | ||
85 | value:"letter-ansi-a-landscape" | ||
86 | }, | ||
87 | { | ||
88 | label:"letter纵向", | ||
89 | value:"letter-ansi-a-portrait" | ||
90 | }, | ||
91 | { | ||
92 | label:"B开横向", | ||
93 | value:"tabloid-ansi-b-landscape" | ||
94 | }, | ||
95 | { | ||
96 | label:"B纵向", | ||
97 | value:"tabloid-ansi-b-portrait" | ||
98 | } | ||
99 | ], | ||
100 | rules:{ | ||
101 | title: [ | ||
102 | { required: true, message: '请输入标题' }, | ||
103 | { min: 2, max: 10, message: '长度在 2 到 10 个字符' } | ||
104 | ], | ||
105 | author:[ | ||
106 | { min: 2, max: 10, message: '长度在 2 到 10 个字符' } | ||
107 | ], | ||
108 | layOut:[ | ||
109 | { required: true, message: '请选择模板' } | ||
110 | ], | ||
111 | format:[ | ||
112 | { required: true, message: '请选择格式' } | ||
113 | ] | ||
114 | }, | ||
115 | serverUrl:"http://192.168.2.201:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task", | ||
116 | isSuccess:false, | ||
117 | retrurnUrl:"" | ||
118 | } | ||
119 | }, | ||
120 | mounted(){ | ||
121 | this.initData(); | ||
122 | }, | ||
123 | methods:{ | ||
124 | initData(){ | ||
125 | this.isSuccess = false; | ||
126 | this.retrurnUrl = ""; | ||
127 | this.formData = { | ||
128 | title:"地图", | ||
129 | author:"", | ||
130 | layOut:"map-only", | ||
131 | format:"png32" | ||
132 | } | ||
133 | }, | ||
134 | onSubmit(formName){ | ||
135 | var self = this; | ||
136 | this.$refs[formName].validate((valid) => { | ||
137 | if (valid) { | ||
138 | this.printMap(this.viewId,null,this.serverUrl,this.formData,function(res){ | ||
139 | if(res.url){ | ||
140 | self.isSuccess = true; | ||
141 | self.retrurnUrl = res.url; | ||
142 | } | ||
143 | }); | ||
144 | } else { | ||
145 | console.log('error submit!!'); | ||
146 | return false; | ||
147 | } | ||
148 | }); | ||
149 | }, | ||
150 | showResult(){ | ||
151 | window.open(this.retrurnUrl); | ||
152 | this.isSuccess = false; | ||
153 | }, | ||
154 | resetForm(formName) { | ||
155 | this.formData = { | ||
156 | title:"地图", | ||
157 | author:"", | ||
158 | layOut:"map-only", | ||
159 | format:"png32" | ||
160 | } | ||
161 | } | ||
162 | } | ||
163 | } | ||
164 | </script> | ||
165 | |||
166 | <style scoped lang="less"> | ||
167 | </style> |
-
Please register or sign in to post a comment