JCSS / yl_miniapp

<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" :disabled="true"
                   v-model="formData.treetype"></tui-input>
      </tui-form-item>

      <tui-row>

        <tui-col :span="12">
          <tui-form-item label="胸径" asterisk prop="dbh" :position="3">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true"
                       v-model="formData.dbh"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text>
            </template>
          </tui-form-item>
        </tui-col>

        <tui-col :span="12">
          <tui-form-item label="高度"  prop="treeheight" :position="3">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true"
                       v-model="formData.treeheight"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text>
            </template>
          </tui-form-item>
        </tui-col>
      </tui-row>


      <tui-form-item
          asterisk
          label="位置"
          class="location-form-item"
          prop="growlocation"
      >
        <tui-input padding="0" :borderBottom="false" placeholder="请选择" :disabled="true"
                   v-model="formData.growlocation"></tui-input>
        <template v-slot:right>
          <tui-icon name="gps" :size="20"></tui-icon>
        </template>
      </tui-form-item>

      <tui-col :span="12">
        <tui-form-item
            label="经度"
            class="location-form-item"
            prop="latitude"
            labelColor="#ccc"
        >
          <span style="color: #ccc"> {{ formData.longitude }}</span>
        </tui-form-item>
      </tui-col>

      <tui-col :span="12">
        <tui-form-item
            label="纬度"
            class="location-form-item"
            labelColor="#ccc"
            prop="latitude"
        >
          <span style="color: #ccc"> {{ formData.latitude }}</span>
        </tui-form-item>
      </tui-col>


      <tui-form-item asterisk label="管护单位" prop="managedutyunit">

        <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" :disabled="true"
                   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>
      <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownershipText">
        <tui-input padding="0" :borderBottom="false" placeholder="请选择" :disabled="true"
                   backgroundColor="transparent" v-model="formData.oldtreeownershipText"></tui-input>
      </tui-form-item>

      <tui-form-item label="图片信息" asterisk prop="treeImgList">

        <!--        <tui-image-group :imageList="formData.treeImgList" radius="0"></tui-image-group>-->

        <!-- 图片组组件 -->
        <tui-image-group
            :imageList="formData.treeImgList"
            radius="0"
            @click="previewImage"
        >
        </tui-image-group>

        <!-- 使用ThorUI的tui-upload组件 -->
        <!--           @remove="handleRemove"   :multiple="true"    :value="formData.treeImgList"-->
        <!--        <tui-upload  :disabled="true"-->
        <!--            :height="140"-->
        <!--            :width="140"-->
        <!--            :value="formData.treeImgListFile"-->
        <!--            :serverUrl="serverURL" :header="{'Authorization': userToken}"-->
        <!--            @complete="handleComplete"-->
        <!--            @remove="handleRemove"-->
        <!--            :limit="3"-->
        <!--            accept="image/*"-->
        <!--        >-->
        <!--          &lt;!&ndash; 自定义上传按钮 &ndash;&gt;-->
        <!--          <view class="upload-btn">-->
        <!--            <tui-icon name="plus" size="32" color="#999"></tui-icon>-->

        <!--          </view>-->
        <!--          &lt;!&ndash; 提示信息 &ndash;&gt;-->
        <!--          &lt;!&ndash;        <view class="upload-tips">&ndash;&gt;-->
        <!--          &lt;!&ndash;          最多上传3张图片，单张不超过5MB&ndash;&gt;-->
        <!--          &lt;!&ndash;        </view>&ndash;&gt;-->


        <!--        </tui-upload>-->
        <!-- 提示信息 -->
        <!--        <view class="upload-tips">-->
        <!--          最多上传3张图片，单张不超过5MB-->
        <!--        </view>-->
      </tui-form-item>


      <tui-row>
        <tui-col :span="12">
          <tui-form-item label="拉丁文" prop="latinname">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" :disabled="true"
                       v-model="formData.latinname"></tui-input>
          </tui-form-item>
        </tui-col>
        <tui-col :span="12">
          <tui-form-item label="级别" arrow highlight prop="treeleveltext">
            <tui-input padding="0" :borderBottom="false" placeholder="请选择" :disabled="true"
                       backgroundColor="transparent" v-model="formData.treeleveltext"></tui-input>
          </tui-form-item>
        </tui-col>
      </tui-row>

      <tui-form-item label="生长环境" prop="growthenvironment">
        <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50" :disabled="true"
                   v-model="formData.growthenvironment"></tui-input>
      </tui-form-item>


      <tui-row>
        <tui-col :span="12">
          <tui-form-item label="预估树龄" prop="estimationtreeage" :position="3">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true"
                       v-model="formData.estimationtreeage"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">年</text>
            </template>
          </tui-form-item>
        </tui-col>
        <tui-col :span="12">
          <tui-form-item label="干周" prop="weekday" :position="3">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true"
                       v-model="formData.weekday"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">厘米</text>
            </template>
          </tui-form-item>
        </tui-col>
      </tui-row>


      <tui-row>
        <tui-col :span="12">
          <tui-form-item label="东西冠幅" prop="canopyeastwest" :position="3">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true"
                       v-model="formData.canopyeastwest"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#ccc">米</text>
            </template>
          </tui-form-item>
        </tui-col>
        <tui-col :span="12">
          <tui-form-item label="南北冠幅" prop="canopysouthnorth" :position="3">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true"
                       v-model="formData.canopysouthnorth"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">米</text>
            </template>
          </tui-form-item>
        </tui-col>
      </tui-row>

    </tui-form>
  </view>
</template>

<script>
import { uploadURL, OSSURL } from '@/config/app'
import { treeOwnership, treeLevelReq } from "@/api/tree";
import { useCounterStore } from '@/stores/counter'
const rules = [{
  name: "treetype",
  rule: ["required"],
  msg: ["请输入名称"]
}, {
  name: "treeheight",
  rule: ["required", "maxLength:10", "isAmount"],
  msg: ["请输入数高", "数高不能超过10个字符", "请输入正确"]
}, {
  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: ["请选择权属单位"]
  }, {
    name: "oldtreeownershipText",
    rule: ["required"],
    msg: ["请选择权属分类"]
  }, {
    name: "treeImgListFile",
    rule: ["required", "custom"], // 增加required强制必选
    msg: ["请上传图片", "请至少上传一张图片"], // 对应两个规则的提示
    custom: function (value) {
      // 即使required通过，再校验数组长度
      return value.length > 0;
    }
  }];
export default {
  data() {
    return {
      // 当前预览索引
      currentIndex: 0,
      // 是否显示预览弹窗
      show: false,
      urls: [],
      treeOwnershipData: [],
      treeLevelData: [], // 级别
      //仅对部分数据进行收集演示
      formData: {
        //数名
        treetype: '',
        //树高
        treeheight: '',
        //胸径
        dbh: '',
        //级别
        treelevel: '',
        treeleveltext: '',
        //权属单位
        managedutyunit: '',
        //权属分类
        oldtreeownership: '',
        oldtreeownershipText: '',
        latinname: '', // 拉丁名
        estimationtreeage: '', // 估测树龄
        canopysouthnorth: '', // 冠幅南北
        canopyeastwest: '', // 冠幅东西
        weekday: '', // 干周
        growlocation: '', // 位置
        growthenvironment: '', // 生长环境
        treeImgList: [], // 图片信息
        treeImgListFile: [], // 图片信息
        address: '',      // 位置名称
        latitude: '',     // 纬度
        longitude: '',     // 经度
        road: ''
      },
    }
  },
  computed: {
    // 获取共享store实例
    useCounterStore() {
      return useCounterStore()
    }
  },
  onReady() {
    //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则
    // 开启即时校验，参数：是否开启、校验规则
    // this.$refs.form && this.$refs.form.immediateValidate(true, rules);
  },
  onUnload() {

  },
  onLoad(options) {
    // this.formData = this.useCounterStore.treeData
    const treeData = this.useCounterStore.treeData;

    this.formData = {
      ...treeData,
      // 仅在当前组件中临时转换为对象数组，不修改Pinia源数据
      treeImgList: treeData.treeImgList.map((item, index) => {
        return { id: index*Math.random()*10, src: item };
      })
    };

    this.urls = treeData.treeImgList
    // this.formData.treeImgList = this.formData.treeImgList.map((item, index) => {
    //   return {
    //     id: index*Math.random()*10,
    //     src: item
    //   }
    // });

    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;
      }
    })
  },
  methods: {
    // 图片预览
    previewImage(e) {
      // 获取当前点击的图片索引（不同版本组件可能参数不同）
      const index = e.index || 0;
      // 使用uni-app自带的图片预览API
      uni.previewImage({
        // 预览的图片地址列表
        urls: this.urls,
        // 初始显示的图片索引
        current: index,
        // 预览窗口关闭时的回调
        success: function(res) {
          console.log('预览图片成功');
        },
        // 预览失败的回调
        fail: function(err) {
          console.error('预览图片失败：', err);
        }
      });
    },

  }
}
</script>

<style>

</style>