JCSS / yl_miniapp

Blame view

subPackages/treePage/editTreeIfo.vue 17.2 KB
Edit Raw Normal View History
f2ecd120   刘淇   树 修改 
1
2
3
4
5
6
7
8
9
 
  <template>
    <view class="container">
      <tui-form ref="form" :show-message="false" :model="formData">
        <tui-form-item asterisk label="名称" prop="treetype">
          <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30"
                     v-model="formData.treetype"></tui-input>
        </tui-form-item>
  
        <tui-row>
73dee4bd   刘淇   高度非必填 
10
f2ecd120   刘淇   树 修改 
11
 
          <tui-col :span="12">
69173829   刘淇   样式优化 
12
13
 
            <tui-form-item label="胸径" asterisk prop="dbh" :position="2">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
73dee4bd   刘淇   高度非必填 
14
 
                         v-model="formData.dbh"></tui-input>
f2ecd120   刘淇   树 修改 
15
 
              <template v-slot:right>
69173829   刘淇   样式优化 
16
 
                <text style="padding-left: 12rpx;color:#ccc;font-size:14px">米</text>
f2ecd120   刘淇   树 修改 
17
18
19
20
 
              </template>
            </tui-form-item>
          </tui-col>
          <tui-col :span="12">
69173829   刘淇   样式优化 
21
22
 
            <tui-form-item label="高度"  prop="treeheight" :position="2">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
73dee4bd   刘淇   高度非必填 
23
 
                         v-model="formData.treeheight"></tui-input>
f2ecd120   刘淇   树 修改 
24
 
              <template v-slot:right>
73dee4bd   刘淇   高度非必填 
25
 
                <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text>
f2ecd120   刘淇   树 修改 
26
27
28
29
 
              </template>
            </tui-form-item>
          </tui-col>
        </tui-row>
f2ecd120   刘淇   树 修改 
30
31
32
33
34
35
36
37
38
39
40
41
42
 
        <tui-form-item
            asterisk
            label="位置"
            class="location-form-item"
            @click="openMap"
            prop="growlocation"
        >
          <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
                     v-model="formData.growlocation"></tui-input>
          <template v-slot:right>
            <tui-icon name="gps" :size="20"></tui-icon>
          </template>
        </tui-form-item>
f2ecd120   刘淇   树 修改 
43
44
 
        <tui-col :span="12">
          <tui-form-item
73dee4bd   刘淇   高度非必填 
45
46
 
              label="经度"
              labelColor="#ccc"
f2ecd120   刘淇   树 修改 
47
 
              class="location-form-item"
f2ecd120   刘淇   树 修改 
48
49
 
              prop="latitude"
          >
f883eafa   刘淇   首次加载 
50
51
52
 
  <!--          <span style="color: #ccc;font-size: 14px"> {{ formData.longitude }}</span>-->
            <tui-input padding="0" :borderBottom="false" placeholder="" disabled
                       v-model="formData.longitude"></tui-input>
f2ecd120   刘淇   树 修改 
53
54
 
          </tui-form-item>
        </tui-col>
73dee4bd   刘淇   高度非必填 
55
f2ecd120   刘淇   树 修改 
56
57
 
        <tui-col :span="12">
          <tui-form-item
73dee4bd   刘淇   高度非必填 
58
59
 
              labelColor="#ccc"
              label="纬度"
f2ecd120   刘淇   树 修改 
60
 
              class="location-form-item"
f2ecd120   刘淇   树 修改 
61
62
 
              prop="latitude"
          >
f883eafa   刘淇   首次加载 
63
64
65
 
  <!--          <span style="color: #ccc;font-size: 14px"> {{ formData.latitude }}</span>-->
            <tui-input padding="0" :borderBottom="false" placeholder="" disabled
                       v-model="formData.latitude"></tui-input>
f2ecd120   刘淇   树 修改 
66
67
68
69
 
          </tui-form-item>
        </tui-col>
73dee4bd   刘淇   高度非必填 
70
f2ecd120   刘淇   树 修改 
71
72
73
74
75
76
77
78
 
        <tui-form-item asterisk label="管护单位" prop="managedutyunit">
  
          <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"
                     v-model="formData.managedutyunit"></tui-input>
  
          <!--        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled-->
          <!--                   backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>-->
        </tui-form-item>
b951d827   刘淇   树木详情 
79
 
        <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownershipText" @click="pickerShow">
f2ecd120   刘淇   树 修改 
80
 
          <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
b951d827   刘淇   树木详情 
81
 
                     backgroundColor="transparent" v-model="formData.oldtreeownershipText"></tui-input>
f2ecd120   刘淇   树 修改 
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
        </tui-form-item>
  
        <tui-form-item label="图片信息" asterisk prop="treeImgList">
          <!-- 使用ThorUI的tui-upload组件 -->
          <!--           @remove="handleRemove"   :multiple="true"    :value="formData.treeImgList"-->
          <tui-upload
              :height="140"
              :width="140"
              :value="formData.treeImgListFile"
              :serverUrl="serverURL" :header="{'Authorization': userToken}"
              @complete="handleComplete"
              @remove="handleRemove"
              :limit="3"
              accept="image/*"
          >
            <!-- 自定义上传按钮 -->
            <view class="upload-btn">
              <tui-icon name="plus" size="32" color="#999"></tui-icon>
  
            </view>
            <!-- 提示信息 -->
            <!--        <view class="upload-tips">-->
            <!--          最多上传3张图片，单张不超过5MB-->
            <!--        </view>-->
  
  
          </tui-upload>
          <!-- 提示信息 -->
          <!--        <view class="upload-tips">-->
          <!--          最多上传3张图片，单张不超过5MB-->
          <!--        </view>-->
        </tui-form-item>
  
        <!-- 动画区域（初始隐藏） -->
        <view
            class="animated-area"
            :style="{
          height: isShow ? contentHeight + 'px' : '0',
          opacity: isShow ? 1 : 0,
          overflow: 'hidden'
        }"
        >
  
          <tui-row>
            <tui-col :span="12">
              <tui-form-item label="拉丁文" prop="latinname">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"
                           v-model="formData.latinname"></tui-input>
              </tui-form-item>
            </tui-col>
            <tui-col :span="12">
b951d827   刘淇   树木详情 
133
 
              <tui-form-item label="级别" arrow highlight prop="treeleveltext" @click="pickerLevelShow">
f2ecd120   刘淇   树 修改 
134
 
                <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
b951d827   刘淇   树木详情 
135
 
                           backgroundColor="transparent" v-model="formData.treeleveltext"></tui-input>
f2ecd120   刘淇   树 修改 
136
137
138
139
140
141
142
143
144
145
146
147
 
              </tui-form-item>
            </tui-col>
          </tui-row>
  
          <tui-form-item label="生长环境" prop="growthenvironment">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50"
                       v-model="formData.growthenvironment"></tui-input>
          </tui-form-item>
  
  
          <tui-row>
            <tui-col :span="12">
69173829   刘淇   样式优化 
148
149
 
              <tui-form-item label="预估树龄" prop="estimationtreeage" :position="2">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
f2ecd120   刘淇   树 修改 
150
151
 
                           v-model="formData.estimationtreeage"></tui-input>
                <template v-slot:right>
69173829   刘淇   样式优化 
152
 
                  <text style="padding-left: 12rpx;color:#ccc;font-size: 12px">年</text>
f2ecd120   刘淇   树 修改 
153
154
155
156
 
                </template>
              </tui-form-item>
            </tui-col>
            <tui-col :span="12">
69173829   刘淇   样式优化 
157
158
 
              <tui-form-item label="干周" prop="weekday" :position="2">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
f2ecd120   刘淇   树 修改 
159
160
 
                           v-model="formData.weekday"></tui-input>
                <template v-slot:right>
69173829   刘淇   样式优化 
161
 
                  <text style="padding-left: 12rpx;color:#ccc;font-size: 12px">厘米</text>
f2ecd120   刘淇   树 修改 
162
163
164
165
166
167
168
169
 
                </template>
              </tui-form-item>
            </tui-col>
          </tui-row>
  
  
          <tui-row>
            <tui-col :span="12">
69173829   刘淇   样式优化 
170
171
 
              <tui-form-item label="东西冠幅" prop="canopyeastwest" :position="2">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
f2ecd120   刘淇   树 修改 
172
173
 
                           v-model="formData.canopyeastwest"></tui-input>
                <template v-slot:right>
fa7a1f8d   刘淇   首页完善 
174
 
                  <text style="padding-left: 12rpx;color:#ccc;font-size: 12px">米</text>
f2ecd120   刘淇   树 修改 
175
176
177
178
 
                </template>
              </tui-form-item>
            </tui-col>
            <tui-col :span="12">
69173829   刘淇   样式优化 
179
180
 
              <tui-form-item label="南北冠幅" prop="canopysouthnorth" :position="2">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
f2ecd120   刘淇   树 修改 
181
182
 
                           v-model="formData.canopysouthnorth"></tui-input>
                <template v-slot:right>
69173829   刘淇   样式优化 
183
 
                  <text style="padding-left: 12rpx;color:#ccc;font-size: 12px">米</text>
f2ecd120   刘淇   树 修改 
184
185
186
187
188
 
                </template>
              </tui-form-item>
            </tui-col>
          </tui-row>
f2ecd120   刘淇   树 修改 
189
190
191
192
193
194
195
196
197
198
 
        </view>
  
        <!-- 触发按钮 -->
        <tui-button
            @click="toggleArea"
            type="primary"
            :loading="false"
            height="80rpx"
            plain
        >
f883eafa   刘淇   首次加载 
199
 
          {{ isShow ? '- 隐藏更多属性' : '+ 展示更多属性' }}
f2ecd120   刘淇   树 修改 
200
 
        </tui-button>
f2ecd120   刘淇   树 修改 
201
 
      </tui-form>
b951d827   刘淇   树木详情 
202
203
 
      <view style="height: 60px;width: 100%"></view>
      <view class="tui-btn__box">
73dee4bd   刘淇   高度非必填 
204
 
        <tui-button bold @click="submit">修改树木信息</tui-button>
b951d827   刘淇   树木详情 
205
 
      </view>
f2ecd120   刘淇   树 修改 
206
207
208
209
210
211
212
213
214
215
216
 
      <tui-picker :show="show" :pickerData="treeOwnershipData" textField="dictLabel" valueField="dictValue"
                  @hide="pickerHide" @change="pickerChange">
      </tui-picker>
  
      <tui-picker :show="levelshow" :pickerData="treeLevelData" textField="dictLabel" valueField="dictValue"
                  @hide="pickerLevelHide" @change="pickerLevelChange">
      </tui-picker>
    </view>
  </template>
  
  <script>
b951d827   刘淇   树木详情 
217
 
  import { uploadURL, OSSURL } from '@/config/app'
7fc91f7a   刘淇   上传体验版优化 
218
 
  import { treeOwnership, addTree, treeLevelReq, treeDetailReq, updateTree } from "@/subPackages/common/api/tree.js";
f2ecd120   刘淇   树 修改 
219
220
221
222
223
224
 
  const rules = [{
    name: "treetype",
    rule: ["required"],
    msg: ["请输入名称"]
  }, {
    name: "treeheight",
73dee4bd   刘淇   高度非必填 
225
226
 
    rule: ["maxLength:10", "isAmount"],
    msg: ["数高不能超过10个字符", "请输入正确"]
f2ecd120   刘淇   树 修改 
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
 
  }, {
    name: "dbh",
    rule: ["required", "maxLength:10", "isAmount"],
    msg: ["请输入胸径", "胸径不能超过10个字符", "请输入正确"]
  }, {
    name: "estimationtreeage",
    rule: ["maxLength:10", "isAmount"],
    msg: ["胸径不能超过10个字符", "请输入正确"]
  },
    {
      name: "weekday",
      rule: ["maxLength:10", "isAmount"],
      msg: ["胸径不能超过10个字符", "请输入正确"]
    },
    {
      name: "canopyeastwest",
      rule: ["maxLength:10", "isAmount"],
      msg: ["胸径不能超过10个字符", "请输入正确"]
    },
    {
      name: "canopysouthnorth",
      rule: ["maxLength:10", "isAmount"],
      msg: ["胸径不能超过10个字符", "请输入正确"]
    }, {
      name: "growlocation",
      rule: ["required"],
      msg: ["请地图选择位置"]
    }, {
      name: "managedutyunit",
      rule: ["required"],
      msg: ["请选择权属单位"]
    }, {
b951d827   刘淇   树木详情 
259
 
      name: "oldtreeownershipText",
f2ecd120   刘淇   树 修改 
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
 
      rule: ["required"],
      msg: ["请选择权属分类"]
    }, {
      name: "treeImgListFile",
      rule: ["required", "custom"], // 增加required强制必选
      msg: ["请上传图片", "请至少上传一张图片"], // 对应两个规则的提示
      custom: function (value) {
        // 即使required通过，再校验数组长度
        return value.length > 0;
      }
    }];
  export default {
    props: {
      treeId: {
        type: String,
        required: true
      }
    },
f2ecd120   刘淇   树 修改 
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
 
    data() {
      return {
        isShow: false,       // 控制区域显示/隐藏
        contentHeight: 200,    // 内容区域高度
        serverURL: uploadURL,
        treeOwnershipData: [],
        treeLevelData: [], // 级别
        show: false,
        levelshow: false,
        //仅对部分数据进行收集演示
        formData: {
          //数名
          treetype: '',
          //树高
          treeheight: '',
          //胸径
          dbh: '',
          //级别
          treelevel: '',
b951d827   刘淇   树木详情 
297
 
          treeleveltext: '',
f2ecd120   刘淇   树 修改 
298
299
300
301
 
          //权属单位
          managedutyunit: '',
          //权属分类
          oldtreeownership: '',
b951d827   刘淇   树木详情 
302
 
          oldtreeownershipText: '',
f2ecd120   刘淇   树 修改 
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
 
          latinname: '', // 拉丁名
          estimationtreeage: '', // 估测树龄
          canopysouthnorth: '', // 冠幅南北
          canopyeastwest: '', // 冠幅东西
          weekday: '', // 干周
          growlocation: '', // 位置
          growthenvironment: '', // 生长环境
          treeImgList: [], // 图片信息
          treeImgListFile: [], // 图片信息
          address: '',      // 位置名称
          latitude: '',     // 纬度
          longitude: '',     // 经度
          road: ''
        },
      }
    },
    watch: {
      treeId: {
b951d827   刘淇   树木详情 
321
 
        immediate: true,
f2ecd120   刘淇   树 修改 
322
 
        handler(newVal, oldVal) {
137be4e2   刘淇   树木历史 
323
 
          if (newVal && newVal !== oldVal) {
f2ecd120   刘淇   树 修改 
324
325
326
327
328
329
330
331
332
333
334
335
 
            this.treeDetailQuery(newVal)
          }
        }
      }
    },
    onReady() {
      //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则
      // 开启即时校验，参数：是否开启、校验规则
      this.$refs.form && this.$refs.form.immediateValidate(true, rules);
      // this.$refs.form && this.$refs.form.immediateValidate(true, rules)
    },
    onLoad(options) {
f2ecd120   刘淇   树 修改 
336
337
 
    },
    methods: {
b951d827   刘淇   树木详情 
338
339
 
      treeDetailQuery(newVal) {
        treeDetailReq(newVal).then(res => {
f2ecd120   刘淇   树 修改 
340
 
          this.formData = res.data
137be4e2   刘淇   树木历史 
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
 
          treeLevelReq().then(res => {
            this.treeLevelData = res.data
            const optiontreelevel = this.treeLevelData.find(item => item.dictValue === this.formData.treelevel);
            if (optiontreelevel) {
              this.formData.treelevel = optiontreelevel.dictValue;
              this.formData.treeleveltext = optiontreelevel.dictLabel;
            }
          })
          treeOwnership().then(res => {
            this.treeOwnershipData = res.data
            const option = this.treeOwnershipData.find(item => item.dictValue === this.formData.oldtreeownership);
            if (option) {
              this.formData.oldtreeownership = option.dictValue;
              this.formData.oldtreeownershipText = option.dictLabel;
            }
          })
f2ecd120   刘淇   树 修改 
357
358
359
360
361
 
          this.formData.treeImgListFile = res.data.treeImgList.map(imgUrl => {
            return imgUrl.startsWith(OSSURL)
                ? imgUrl.slice(OSSURL.length)
                : imgUrl;
          });
f2ecd120   刘淇   树 修改 
362
363
 
        })
      },
f2ecd120   刘淇   树 修改 
364
365
366
367
368
369
370
371
372
373
374
375
376
377
 
      treeOwnership() {
        treeOwnership().then(res => {
          console.log(res)
          this.treeOwnershipData = res.data
        })
      },
      // 切换显示/隐藏状态
      toggleArea() {
        this.isShow = !this.isShow;
      },
      // 上传完成回调
      handleComplete(e) {
        if (e.status == 1) {
          console.log(e)
f2ecd120   刘淇   树 修改 
378
 
          this.formData.treeImgListFile = e.imgArr
b951d827   刘淇   树木详情 
379
 
          this.formData.treeImgList = e.imgArr.map(item => OSSURL + item);
f2ecd120   刘淇   树 修改 
380
381
382
383
 
          console.log(this.formData.treeImgList)
          // baseURL
          // 手动触发treeImgList字段的校验
          this.$refs.form.validateField("treeImgList");
f2ecd120   刘淇   树 修改 
384
 
        }
f2ecd120   刘淇   树 修改 
385
386
387
388
389
390
391
 
      },
      // 删除图片回调
      handleRemove(index) {
        // 从列表中移除
        this.formData.treeImgList.splice(index, 1);
        this.formData.treeImgListFile.splice(index, 1);
        console.log(this.formData.treeImgList.length)
f2ecd120   刘淇   树 修改 
392
393
394
395
396
397
398
399
400
 
      },
      pickerShow() {
        this.show = true
      },
      pickerHide() {
        this.show = false
      },
      pickerChange(e) {
        console.log(e)
b951d827   刘淇   树木详情 
401
402
 
        this.formData.oldtreeownership = e.dictValue
        this.formData.oldtreeownershipText = e.dictLabel
f2ecd120   刘淇   树 修改 
403
404
405
406
407
408
409
410
411
 
      },
      pickerLevelShow() {
        this.levelshow = true
      },
      pickerLevelHide() {
        this.levelshow = false
      },
      pickerLevelChange(e) {
        console.log(e)
b951d827   刘淇   树木详情 
412
413
 
        this.formData.treelevel = e.dictValue
        this.formData.treeleveltext = e.dictLabel
f2ecd120   刘淇   树 修改 
414
415
416
417
418
 
      },
      submit() {
        // 3. 打印提交时的数据
        console.log("提交时treeImgList：", this.formData.treeImgList);
        // 手动校验图片
73dee4bd   刘淇   高度非必填 
419
 
        console.log( this.formData);
f2ecd120   刘淇   树 修改 
420
421
422
423
424
425
426
427
428
 
        if (!this.formData.treeImgList || this.formData.treeImgList.length === 0) {
          uni.showToast({title: "请上传图片", icon: "none"});
          return; // 阻止提交
        }
        //注：结合FormItem校验，validate方法第三个参数必须传true
        this.$refs.form.validate(this.formData, rules, true).then(res => {
          if (res.isPass) {
            console.log(this.formData)
            console.log('校验通过！')
73dee4bd   刘淇   高度非必填 
429
 
            updateTree({data:this.formData}).then(res => {
f2ecd120   刘淇   树 修改 
430
 
              console.log(res)
75d3172d   刘淇   样式优化 
431
 
              this.formData.maintainunit = this.userInfo.belongCompanyId
f2ecd120   刘淇   树 修改 
432
433
 
              if (res.code == '200') {
                uni.showToast({title: "修改成功", icon: "none"});
69173829   刘淇   样式优化 
434
 
                // uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${this.formData.road}`)
731c8689   刘淇   跳转优化 
435
436
437
438
 
                // uni.$tui.href(`/subPackages/treePage/treeFiles`)
                uni.redirectTo({
                  url: '/subPackages/treePage/treeFiles' // 目标页面路径
                });
f2ecd120   刘淇   树 修改 
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
 
              }
            })
          } else {
            console.log(res)
          }
        }).catch(errors => {
          console.log(errors)
        })
      },
      // 打开地图选择
      openMap() {
        // 如果已有位置信息，默认显示该位置，否则使用当前位置
        const options = {
          latitude: this.formData.latitude ? Number(this.formData.latitude) : '',
          longitude: this.formData.longitude ? Number(this.formData.longitude) : '',
          scale: 16,        // 地图缩放级别
          name: this.formData.growlocation || '',  // 位置名称
          address: this.formData.growlocation || '' // 详细地址
        };
        // 调用微信小程序地图选择API
        uni.chooseLocation({
          ...options,
          success: (res) => {
            console.log(res)
            // 选择成功后更新位置信息
            this.formData.growlocation = res.address
            this.formData.latitude = res.latitude
            this.formData.longitude = res.longitude
          },
          fail: (err) => {
            console.error('地图选择失败', err);
            if (err.errMsg.includes('auth deny')) {
              uni.showToast({
                title: '请授权位置权限',
                icon: 'none'
              });
            }
          }
        });
      }
    }
  }
  </script>
  
  <style>
  .tui-title {
    width: 100%;
    font-size: 28rpx;
    color: #888;
    padding: 30rpx;
    box-sizing: border-box;
  }
  
  .tui-btn__box {
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  
  .location-content {
    font-size: 14px;
  }
  
  /* 动画区域样式 */
  .animated-area {
    height: 200rpx;
    transition: all 0.3s ease-out; /* 动画过渡效果 */
  }
  </style>