Commit 3bea8ade8f977a92dc2ee8205dcc7ee160ec9c39

Authored by 刘淇
1 parent c7744156

图片上传

Showing 1 changed file with 132 additions and 131 deletions
subPackages/treePage/addTree.vue
1 1 <template>
2 2 <view class="container">
3 3 <tui-form ref="form" :show-message="false" :model="formData">
4   - <tui-form-item asterisk label="名称" prop="name">
  4 + <tui-form-item asterisk label="名称" prop="treetype">
5 5 <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30"
6   - v-model="formData.name"></tui-input>
  6 + v-model="formData.treetype"></tui-input>
7 7 </tui-form-item>
8 8  
9 9 <tui-row>
10   - <tui-col span="12">
11   - <tui-form-item label="高度" asterisk prop="height" :position="3">
12   - <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
13   - v-model="formData.height"></tui-input>
  10 + <tui-col :span="12">
  11 + <tui-form-item label="高度" asterisk prop="treeheight" :position="3">
  12 + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
  13 + v-model="formData.treeheight"></tui-input>
14 14 <template v-slot:right>
15   - <text style="padding-left: 12rpx;color:#aaa">米</text>
  15 + <text style="padding-left: 12rpx;color:#aaa;font-size:14px;">米</text>
16 16 </template>
17 17 </tui-form-item>
18 18 </tui-col>
19   - <tui-col span="12">
20   - <tui-form-item label="胸径" asterisk prop="height" :position="3">
  19 + <tui-col :span="12">
  20 + <tui-form-item label="胸径" asterisk prop="dbh" :position="3">
21 21 <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
22   - v-model="formData.height"></tui-input>
  22 + v-model="formData.dbh"></tui-input>
23 23 <template v-slot:right>
24   - <text style="padding-left: 12rpx;color:#aaa">厘米</text>
  24 + <text style="padding-left: 12rpx;color:#aaa;font-size:14px">厘米</text>
25 25 </template>
26 26 </tui-form-item>
27 27 </tui-col>
... ... @@ -33,73 +33,56 @@
33 33 label="位置"
34 34 class="location-form-item"
35 35 @click="openMap"
  36 + prop="growlocation"
36 37 >
37 38 <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
38   - v-model="formData.address"></tui-input>
  39 + v-model="formData.growlocation"></tui-input>
39 40 <template v-slot:right>
40 41 <tui-icon name="gps" :size="20"></tui-icon>
41 42 </template>
42   - <!-- &lt;!&ndash; 位置显示区域 &ndash;&gt;-->
43   - <!-- <view class="location-content">-->
44   - <!-- <text v-if="formData.address">{{ formData.address }}</text>-->
45   - <!-- <text v-else class="placeholder">请选择位置</text>-->
46   - <!-- &lt;!&ndash; 定位图标 &ndash;&gt;-->
47   - <!-- <tui-icon-->
48   - <!-- name="map"-->
49   - <!-- size="24"-->
50   - <!-- color="#666"-->
51   - <!-- class="location-icon"-->
52   - <!-- ></tui-icon>-->
53   - <!-- </view>-->
54 43 </tui-form-item>
55 44  
56   - <tui-form-item asterisk label="管护单位" arrow highlight prop="area" @click="pickerShow">
  45 + <tui-form-item asterisk label="管护单位" arrow highlight prop="managedutyunit" @click="pickerShow">
57 46 <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
58   - backgroundColor="transparent" v-model="formData.area"></tui-input>
  47 + backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>
59 48 </tui-form-item>
60   - <tui-form-item asterisk label="权属分类" arrow highlight prop="area" @click="pickerShow">
  49 + <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownership" @click="pickerShow">
61 50 <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
62   - backgroundColor="transparent" v-model="formData.area"></tui-input>
  51 + backgroundColor="transparent" v-model="formData.oldtreeownership"></tui-input>
63 52 </tui-form-item>
64   - <!-- <tui-form-item asterisk label="验证码" prop="code">-->
65   - <!-- <tui-input padding="0" :borderBottom="false" placeholder="请输入验证码"-->
66   - <!-- v-model="formData.code"></tui-input>-->
67   - <!-- <template v-slot:right>-->
68   - <!-- <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"-->
69   - <!-- bold radius="12rpx">获取验证码</tui-form-button>-->
70   - <!-- </template>-->
71   - <!-- </tui-form-item>-->
72 53  
73   - <tui-form-item label="图片信息" asterisk>
  54 + <tui-form-item label="图片信息" asterisk prop="treeImgList">
74 55 <!-- 使用ThorUI的tui-upload组件 -->
  56 +<!-- @remove="handleRemove" :multiple="true" :value="formData.treeImgList"-->
75 57 <tui-upload
76 58 :height="140"
77 59 :width="140"
78   - :value="value"
  60 + :value="formData.treeImgList"
79 61 :serverUrl="serverURL" :header="{'Authorization': userToken}"
80 62 @complete="handleComplete"
81   - @remove="handleRemove"
  63 +
82 64 :limit="3"
83   - :multiple="true"
  65 +
84 66 accept="image/*"
85   - :maxSize="5242880"
86   - name="file"
87   - :autoUpload="true"
88   - >
89   - <!-- 自定义上传按钮 -->
90   - <view class="upload-btn">
91   - <tui-icon name="plus" size="32" color="#999"></tui-icon>
  67 + >
  68 + <!-- 自定义上传按钮 -->
  69 + <view class="upload-btn">
  70 + <tui-icon name="plus" size="32" color="#999"></tui-icon>
  71 +
  72 + </view>
  73 + <!-- 提示信息 -->
  74 + <!-- <view class="upload-tips">-->
  75 + <!-- 最多上传3张图片,单张不超过5MB-->
  76 + <!-- </view>-->
92 77  
93   - </view>
94   - </tui-upload>
95 78  
  79 + </tui-upload>
96 80 <!-- 提示信息 -->
97 81 <!-- <view class="upload-tips">-->
98 82 <!-- 最多上传3张图片,单张不超过5MB-->
99 83 <!-- </view>-->
100 84 </tui-form-item>
101 85  
102   -
103 86 <!-- 动画区域(初始隐藏) -->
104 87 <view
105 88 class="animated-area"
... ... @@ -111,42 +94,42 @@
111 94 >
112 95  
113 96 <tui-row>
114   - <tui-col span="12">
115   - <tui-form-item label="拉丁文" prop="name">
  97 + <tui-col :span="12">
  98 + <tui-form-item label="拉丁文" prop="latinname">
116 99 <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"
117   - v-model="formData.name"></tui-input>
  100 + v-model="formData.latinname"></tui-input>
118 101 </tui-form-item>
119 102 </tui-col>
120   - <tui-col span="12">
121   - <tui-form-item label="级别" arrow highlight prop="area" @click="pickerShow">
122   - <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
123   - backgroundColor="transparent" v-model="formData.area"></tui-input>
124   - </tui-form-item>
  103 + <tui-col :span="12">
  104 + <tui-form-item label="级别" arrow highlight prop="treelevel" @click="pickerShow">
  105 + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
  106 + backgroundColor="transparent" v-model="formData.treelevel"></tui-input>
  107 + </tui-form-item>
125 108 </tui-col>
126 109 </tui-row>
127 110  
128   - <tui-form-item label="生长环境" prop="name">
  111 + <tui-form-item label="生长环境" prop="growthenvironment">
129 112 <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50"
130   - v-model="formData.name"></tui-input>
  113 + v-model="formData.growthenvironment"></tui-input>
131 114 </tui-form-item>
132 115  
133 116  
134 117 <tui-row>
135   - <tui-col span="12">
136   - <tui-form-item label="预估树龄" prop="height" :position="3">
137   - <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
138   - v-model="formData.height"></tui-input>
  118 + <tui-col :span="12">
  119 + <tui-form-item label="预估树龄" prop="estimationtreeage" :position="3">
  120 + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
  121 + v-model="formData.estimationtreeage"></tui-input>
139 122 <template v-slot:right>
140   - <text style="padding-left: 12rpx;color:#aaa">年</text>
  123 + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">年</text>
141 124 </template>
142 125 </tui-form-item>
143 126 </tui-col>
144   - <tui-col span="12">
145   - <tui-form-item label="干周" prop="height" :position="3">
146   - <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
147   - v-model="formData.height"></tui-input>
  127 + <tui-col :span="12">
  128 + <tui-form-item label="干周" prop="weekday" :position="3">
  129 + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
  130 + v-model="formData.weekday"></tui-input>
148 131 <template v-slot:right>
149   - <text style="padding-left: 12rpx;color:#aaa">厘米</text>
  132 + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">厘米</text>
150 133 </template>
151 134 </tui-form-item>
152 135 </tui-col>
... ... @@ -154,29 +137,27 @@
154 137  
155 138  
156 139 <tui-row>
157   - <tui-col span="12">
158   - <tui-form-item label="东西冠幅" prop="height" :position="3">
159   - <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
160   - v-model="formData.height"></tui-input>
  140 + <tui-col :span="12">
  141 + <tui-form-item label="东西冠幅" prop="canopyeastwest" :position="3">
  142 + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
  143 + v-model="formData.canopyeastwest"></tui-input>
161 144 <template v-slot:right>
162 145 <text style="padding-left: 12rpx;color:#aaa">米</text>
163 146 </template>
164 147 </tui-form-item>
165 148 </tui-col>
166   - <tui-col span="12">
167   - <tui-form-item label="南北冠幅" prop="height" :position="3">
168   - <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
169   - v-model="formData.height"></tui-input>
  149 + <tui-col :span="12">
  150 + <tui-form-item label="南北冠幅" prop="canopysouthnorth" :position="3">
  151 + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
  152 + v-model="formData.canopysouthnorth"></tui-input>
170 153 <template v-slot:right>
171   - <text style="padding-left: 12rpx;color:#aaa">米</text>
  154 + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">米</text>
172 155 </template>
173 156 </tui-form-item>
174 157 </tui-col>
175 158 </tui-row>
176 159  
177 160  
178   -
179   -
180 161 </view>
181 162  
182 163 <!-- 触发按钮 -->
... ... @@ -203,33 +184,37 @@
203 184 <script>
204 185 import { uploadURL } from '@/config/app'
205 186 const rules = [{
206   - name: "score",
207   - rule: ["range:[0.5,5]"],
208   - msg: ["请选择评分"]
209   -}, {
210   - name: "name",
211   - rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
212   - msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
213   -}, {
214   - name: "area",
  187 + name: "treetype",
215 188 rule: ["required"],
216   - msg: ["请选择地区"]
  189 + msg: ["请输入名称"]
  190 +}, {
  191 + name: "treeheight",
  192 + rule: ["required", "maxLength:10"],
  193 + msg: ["请输入数高", "数高不能超过10个字符"]
217 194 }, {
218   - name: "code",
219   - rule: ["required", "minLength:4"],
220   - msg: ["请输入验证码", "验证码不少于4位"]
  195 + name: "dbh",
  196 + rule: ["required", "maxLength:10"],
  197 + msg: ["请输入胸径", "胸径不能超过10个字符"]
221 198 }, {
222   - name: "height",
223   - rule: ["required", "isNum"],
224   - msg: ["请输入身高", "身高只能填数字"]
  199 + name: "growlocation",
  200 + rule: ["required"],
  201 + msg: ["请地图选择位置"]
225 202 }, {
226   - name: "remark",
  203 + name: "managedutyunit",
227 204 rule: ["required"],
228   - msg: ["请输入备注"]
  205 + msg: ["请选择权属单位"]
229 206 }, {
230   - name: "content",
  207 + name: "oldtreeownership",
231 208 rule: ["required"],
232   - msg: ["请输入详细内容"]
  209 + msg: ["请选择权属分类"]
  210 +}, {
  211 + name: "treeImgList",
  212 + // 自定义验证函数处理数组类型
  213 + rule: [(value) => {
  214 + // 验证逻辑:数组长度至少为1
  215 + return Array.isArray(value) && value.length > 0;
  216 + }],
  217 + msg: ["请上传图片"]
233 218 }];
234 219 export default {
235 220 props: {
... ... @@ -257,29 +242,39 @@ export default {
257 242 show: false,
258 243 //仅对部分数据进行收集演示
259 244 formData: {
260   - //评分
261   - score: 0,
262   - //姓名
263   - name: '',
264   - //地区
265   - area: '',
266   - //验证码
267   - code: '',
268   - //身高
269   - height: '',
  245 + //数名
  246 + treetype: '',
  247 + //树高
  248 + treeheight: '',
  249 + //胸径
  250 + dbh: '',
  251 + //级别
  252 + treelevel: '',
  253 + //权属单位
  254 + managedutyunit: '',
  255 + //权属分类
  256 + oldtreeownership: '',
  257 + latinname: '', // 拉丁名
  258 + estimationtreeage: '', // 估测树龄
  259 + canopysouthnorth:'', // 冠幅南北
  260 + canopyeastwest: '', // 冠幅东西
  261 + weekday: '', // 干周
  262 + growlocation:'', // 位置
  263 + growthenvironment: '', // 生长环境
  264 + treeImgList:[], // 图片信息
270 265 address: '', // 位置名称
271 266 latitude: '', // 纬度
272 267 longitude: '' // 经度
273 268 },
274   - currentFiles: [...this.value], // 当前已上传文件列表
275   - value: []
  269 + // currentFiles: [...this.value], // 当前已上传文件列表
  270 + // value: []
276 271 }
277 272 },
278 273 watch: {
279 274 // 监听外部传入的value变化
280   - value(newVal) {
281   - this.currentFiles = [...newVal];
282   - }
  275 + // value(newVal) {
  276 + // this.currentFiles = [...newVal];
  277 + // }
283 278 },
284 279 onReady() {
285 280 //开启即时校验,开启后输入即校验【参数必传】,第一参数:是否开启;第二参数:校验规则
... ... @@ -292,23 +287,28 @@ export default {
292 287 },
293 288 // 上传完成回调
294 289 handleComplete(e) {
295   - console.log(e)
296   - this.value = e.imgArr;
  290 +
  291 + if (e.status == 1){
  292 + console.log(e)
  293 + this.formData.treeImgList.push(e.imgArr);
  294 + console.log(this.formData.treeImgList)
  295 + console.log(this.formData.treeImgList.length)
  296 + }
  297 +
  298 + // this.formData.treeImgList = e.imgArr;
297 299 // 根据实际接口返回格式调整
298 300 // this.currentFiles.push(e.data);
299 301 },
300 302 // 删除图片回调
301 303 handleRemove(index) {
302 304 // 从列表中移除
303   - this.currentFiles.splice(index, 1);
  305 + this.formData.treeImgList.splice(index, 1);
  306 + console.log(this.formData.treeImgList.length)
304 307 // // 通知父组件更新
305 308 // this.$emit('input', this.currentFiles);
306 309 // this.$emit('remove', index);
307 310 },
308   - change(e) {
309   - console.log(e)
310   - this.formData.score = e.score
311   - },
  311 +
312 312 pickerShow() {
313 313 this.show = true
314 314 },
... ... @@ -317,7 +317,9 @@ export default {
317 317 },
318 318 pickerChange(e) {
319 319 console.log(e)
320   - this.formData.area = e.text
  320 + this.formData.oldtreeownership = e.text
  321 + this.formData.managedutyunit = e.text
  322 +
321 323 },
322 324 submit() {
323 325 //注:结合FormItem校验,validate方法第三个参数必须传true
... ... @@ -339,19 +341,18 @@ export default {
339 341 latitude: this.formData.latitude ? Number(this.formData.latitude) : '',
340 342 longitude: this.formData.longitude ? Number(this.formData.longitude) : '',
341 343 scale: 16, // 地图缩放级别
342   - name: this.formData.address || '', // 位置名称
343   - address: this.formData.address || '' // 详细地址
  344 + name: this.formData.growlocation || '', // 位置名称
  345 + address: this.formData.growlocation || '' // 详细地址
344 346 };
345 347 // 调用微信小程序地图选择API
346 348 uni.chooseLocation({
347 349 ...options,
348 350 success: (res) => {
  351 + console.log(res)
349 352 // 选择成功后更新位置信息
350   - this.formData = {
351   - address: res.name || res.address,
352   - latitude: res.latitude,
353   - longitude: res.longitude
354   - };
  353 + this.formData.growlocation = res.address
  354 + this.formData.latitude = res.latitude
  355 + this.formData.longitude = res.longitude
355 356 },
356 357 fail: (err) => {
357 358 console.error('地图选择失败', err);
... ...