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="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-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-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"
          >

            {{ formData.longitude }}

          </tui-form-item>
        </tui-col>

        <tui-col :span="12">
          <tui-form-item

  
              label="纬度"

              class="location-form-item"

              prop="latitude"
          >

            {{ formData.latitude }}

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