JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <up-form :model="formData" ref="formRef" label-width="140rpx" border-bottom>
        <up-form-item label="名称" prop="treetype" required>

          <up-input v-model.trim="formData.treetype" placeholder="请输入名称" maxlength="30" border="none"/>

        </up-form-item>
  

        <!-- 树种类型 底部弹窗选择 -->
        <!-- <up-form-item label="树种类型" prop="treeSpeciesType" required arrow @click="openTreeSpeciesType">
          <up-input
            v-model="formData.treeSpeciesTypeName"
            placeholder="请选择树种类型"
            readonly
            border="none"
            bg-color="transparent"
          />
        </up-form-item> -->
  

        <view class="form-row-wrap">
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="胸径" prop="dbh" required>

                <up-input v-model.trim="formData.dbh" placeholder="请输入" maxlength="10" border="none" input-align="left"/>

                <template #right>

                  <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text>

                </template>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="高度" prop="treeheight">

                <up-input v-model.trim="formData.treeheight" placeholder="请输入" maxlength="10" border="none"

                          input-align="left"/>
                <template #right>
                  <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text>
                </template>
              </up-form-item>
            </up-col>
          </up-row>
        </view>

  
        <up-form-item label="位置" prop="growlocation" required class="location-form-item" @click="openMap">

          <up-input v-model="formData.growlocation" placeholder="请选择" readonly border="none"/>

          <template #right>
            <up-icon name="map" size="22"></up-icon>
          </template>
        </up-form-item>
  
        <up-row gutter="10">
          <up-col span="6">

            <up-form-item label="经度" :borderBottom="false">

              <up-input v-model="formData.longitude" placeholder="" readonly border="none"/>

            </up-form-item>
          </up-col>
          <up-col span="6">

            <up-form-item label="纬度" :borderBottom="false">

              <up-input v-model="formData.latitude" placeholder="" readonly border="none"/>

            </up-form-item>
          </up-col>
        </up-row>
  
        <up-form-item label="管护单位" prop="managedutyunit" required>

          <up-input v-model.trim="formData.managedutyunit" placeholder="请输入" maxlength="30" border="none"/>

        </up-form-item>
  

        <up-form-item label="权属分类" prop="oldtreeownershipText" required arrow @click="handleActionSheetOpen('ownership')">

          <up-input v-model.trim="formData.oldtreeownershipText" placeholder="请选择" readonly border="none"
                    bg-color="transparent"/>

        </up-form-item>
  

        <up-form-item label="图片信息" prop="treeImgList" required>
          <up-upload
              :file-list="treeImgs.imgList.value || []"
              @after-read="treeImgs.uploadImgs"
              @delete="treeImgs.deleteImg"
              multiple
              :width="70"
              :height="70"
              :max-count="treeImgs.uploadConfig.maxCount"

              :upload-text="treeImgs.uploadText"

              :size-type="treeImgs.uploadConfig.sizeType"
          ></up-upload>
        </up-form-item>

        <view
            class="animated-area"
            :style="{
            height: isShow ? contentHeight + 'px' : '0',
            opacity: isShow ? 1 : 0,
            overflow: 'hidden'
          }"
        >
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="拉丁文" prop="latinname">

                <up-input v-model.trim="formData.latinname" placeholder="请输入" maxlength="30" border="none"/>

              </up-form-item>
            </up-col>
            <up-col span="6">

              <up-form-item label="级别" arrow @click="handleActionSheetOpen('level')">

                <up-input v-model.trim="formData.treeleveltext" placeholder="请选择" readonly border="none"

                          bg-color="transparent"/>

              </up-form-item>
            </up-col>
          </up-row>
  
          <up-form-item label="生长环境" prop="growthenvironment">

            <up-input v-model.trim="formData.growthenvironment" placeholder="请输入" maxlength="50" border="none"/>

          </up-form-item>
  

          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">

                <!-- 栽种年月 年月选择器 -->
                <up-form-item label="栽种年月" arrow @click="openPlantDatePicker">
                  <up-input v-model.trim="formData.plantingDate" placeholder="请选择栽种年月" readonly border="none" bg-color="transparent"/>

                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="干周" prop="weekday">

                  <up-input v-model.trim="formData.weekday" placeholder="请输入" maxlength="10" border="none"

                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">厘米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>
  
          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">
                <up-form-item label="东西冠幅" prop="canopyeastwest">

                  <up-input v-model.trim="formData.canopyeastwest" placeholder="请输入" maxlength="10" border="none"

                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                  </template>
                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="南北冠幅" prop="canopysouthnorth">

                  <up-input v-model.trim="formData.canopysouthnorth" placeholder="请输入" maxlength="10" border="none"

                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>

        </view>
  

        <up-button
            @click="toggleArea"
            type="primary"
            plain
            size="large"
            style="margin-top:20rpx"
        >
          {{ isShow ? '- 隐藏区域' : '+ 显示区域' }}
        </up-button>
      </up-form>
  
      <view style="height: 60px;width: 100%"></view>
  

      <view class="fixed-bottom-btn-wrap">
        <up-button type="primary" @click="submit" :loading="loadingFlag" size="large" bold>提交</up-button>
      </view>
  

      <up-action-sheet
          :show="showActionSheet"
          :actions="currentActionSheetData.list"
          :title="currentActionSheetData.title"
          @close="handleActionSheetClose"
          @select="handleActionSheetSelect"
      ></up-action-sheet>

      <!-- 年月选择弹窗 -->
      <up-datetime-picker
          v-model="plantingDate"
          :show="showDatePicker"
          :closeOnClickOverlay="true"
          mode="year-month"
          minDate="1000"
          @confirm="onSelectPlantDate"
          @cancel="showDatePicker=false"
      ></up-datetime-picker>

    </view>
  </template>
  
  <script setup>

  import { timeFormat } from '@/uni_modules/uview-plus';

  import { ref, reactive, nextTick } from 'vue'

  import { onReady, onLoad, onShow, onUnload } from '@dcloudio/uni-app';

  onUnload(() => {

    uni.reLaunch({
      url: '/pages-sub/data/tree-archive/index'
    })
  })

  import { addTree } from "@/api/tree-archive/tree-archive.js";

  import { useUploadImgs } from '@/common/utils/useUploadImgs'
  import { useUserStore } from '@/pinia/user';
  

  // ========== 核心工具方法 ==========

  const isPureZero = (val) => {
    if (!val) return false;
    const pureZeroReg = /^0+$/;
    return pureZeroReg.test(val.trim());
  };

  const trimFormData = (obj) => {
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        const val = obj[key];
        if (typeof val === 'string') {
          obj[key] = val.trim();
        }
      }
    }
  };

  const emojiReg = /[\uD83C\uD83D\uD83E][\uDC00-\uDFFF]+|[\u2702\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299\ufe0f\u200d]+/g;

  const filterEmoji = (val) => {
    if (typeof val !== 'string') return val;
    return val.replace(emojiReg, '');
  };

  const hasEmoji = (val) => {
    if (!val) return false;
    return emojiReg.test(val);
  };
  

  // ========== 状态管理 ==========
  const userStore = useUserStore();

  const formRef = ref(null)
  const isShow = ref(false)

  const contentHeight = ref(200)

  const treeOwnershipData = ref([])
  const treeLevelData = ref([])

  const treeSpeciesTypeList = ref([])

  const loadingFlag = ref(false)

  const showActionSheet = ref(false);
  const currentActionSheetData = reactive({ type: '', list: [], title: '' });

  const showDatePicker = ref(false);
  const plantingDate = ref(Date.now())

  // 图片上传配置

  const treeImgs = useUploadImgs({
    maxCount: 3,
    uploadText: '选择图片',
    sizeType: ['compressed'],
    formRef: formRef,
    fieldName: 'treeImgList'
  })

  if (!Array.isArray(treeImgs.rawImgList.value)) treeImgs.rawImgList.value = [];
  

  // 表单数据：treeSpeciesType 存编码，treeSpeciesTypeName 页面展示文字

  const formData = reactive({
    treetype: '',

    // treeSpeciesType: '',
    treeSpeciesTypeName: '',

    treeheight: '',
    dbh: '',
    treelevel: '',
    treeleveltext: '',
    managedutyunit: '',
    oldtreeownership: '',
    oldtreeownershipText: '',
    latinname: '',

    plantingDate: '',

    canopysouthnorth: '',
    canopyeastwest: '',
    weekday: '',
    growlocation: '',
    growthenvironment: '',
    treeImgList: [],
    address: '',
    latitude: '',
    longitude: '',
    road: '',
    maintainunit: ''
  })
  

  // 表单校验规则

  const rules = reactive({

    treetype: [

      {
        validator: (rule, val, callback) => {

          if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
          callback();

        }, trigger: ['blur', 'change', 'input'], priority: 10
      },
      { required: true, message: '请输入名称', trigger: ['blur', 'change', 'input'] },
      { max: 30, message: '名称最多输入30个字符', trigger: ['blur', 'change', 'input'] }

    ],

    // treeSpeciesType: [
    //   { required: true, message: '请选择树种类型', trigger: ['change'] }
    // ],

    treeheight: [

      { max: 10, message: '树高不能超过10个字符', trigger: ['blur', 'change', 'input'] },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
      {
        validator: (rule, val, callback) => {

          if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
          callback();

        }, trigger: ['blur', 'change', 'input']
      }

    ],
    dbh: [

      {
        validator: (rule, val, callback) => {

          if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
          callback();

        }, trigger: ['blur', 'change', 'input'], priority: 10
      },
      { required: true, message: '请输入胸径', trigger: ['blur', 'change', 'input'] },
      { max: 10, message: '胸径不能超过10个字符', trigger: ['blur', 'change', 'input'] },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
      {
        validator: (rule, val, callback) => {

          if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
          callback();

        }, trigger: ['blur', 'change', 'input']
      }

    ],

    weekday: [

      { max: 10, message: '干周不能超过10个字符', trigger: ['blur', 'change', 'input'] },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
      {
        validator: (rule, val, callback) => {

          if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
          callback();

        }, trigger: ['blur', 'change', 'input']
      }

    ],
    canopyeastwest: [

      { max: 10, message: '东西冠幅不能超过10个字符', trigger: ['blur', 'change', 'input'] },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
      {
        validator: (rule, val, callback) => {

          if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
          callback();

        }, trigger: ['blur', 'change', 'input']
      }

    ],
    canopysouthnorth: [

      { max: 10, message: '南北冠幅不能超过10个字符', trigger: ['blur', 'change', 'input'] },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
      {
        validator: (rule, val, callback) => {

          if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
          callback();

        }, trigger: ['blur', 'change', 'input']
      }

    ],

    growlocation: [{ required: true, message: '请选择地图位置', trigger: ['blur', 'change', 'manual'] }],

    managedutyunit: [

      {
        validator: (rule, val, callback) => {

          if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
          callback();

        }, trigger: ['blur', 'change', 'input'], priority: 10
      },
      { required: true, message: '请输入管护单位', trigger: ['blur', 'change', 'input'] },
      { max: 30, message: '管护单位最多输入30个字符', trigger: ['blur', 'change', 'input'] }

    ],

    oldtreeownershipText: [{ required: true, message: '请选择权属分类', trigger: ['blur', 'change'] }],

    latinname: [

      {
        validator: (rule, val, callback) => {

          if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
          callback();

        }, trigger: ['blur', 'change', 'input'], priority: 10
      },
      { max: 30, message: '拉丁文最多输入30个字符', trigger: ['blur', 'change', 'input'] }

    ],
    growthenvironment: [

      {
        validator: (rule, val, callback) => {

          if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
          callback();

        }, trigger: ['blur', 'change', 'input'], priority: 10
      },
      { max: 50, message: '生长环境最多输入50个字符', trigger: ['blur', 'change', 'input'] }

    ],

    treeImgList: [treeImgs.imgValidateRule]

  })
  

  // 生命周期

  onLoad((options) => {
    formData.road = options.roadId
  })

  onShow(async () => {

    treeLevelData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_level'))

    treeOwnershipData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_ownership'))
    treeSpeciesTypeList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_species_type'))

  })

  onReady(() => {
    nextTick(() => {
      formRef.value?.setRules(rules);
    });
  });
  

  // 打开栽种年月选择器

  const openPlantDatePicker = () => {

    showDatePicker.value = true
  }

  
  // 年月选择回调
  const onSelectPlantDate = () => {
    formData.plantingDate = timeFormat(plantingDate.value, 'yyyy-mm')

    showDatePicker.value = false
  }

  // 展开/收起更多区域

  const toggleArea = () => {
    isShow.value = !isShow.value
  }
  

  // 打开权属/级别选择弹窗

  const handleActionSheetOpen = (type) => {
    const configMap = {
      ownership: { title: '请选择权属分类', list: treeOwnershipData.value },
      level: { title: '请选择树木级别', list: treeLevelData.value }
    };
    Object.assign(currentActionSheetData, configMap[type], { type });
    showActionSheet.value = true;
  };
  

  // 打开树种类型选择弹窗
  const openTreeSpeciesType = () => {
    Object.assign(currentActionSheetData, {
      title: '请选择树种类型',
      list: treeSpeciesTypeList.value,
      type: 'treeSpecies'
    })
    showActionSheet.value = true
  }
  
  // 关闭弹窗

  const handleActionSheetClose = () => {
    showActionSheet.value = false;
    Object.assign(currentActionSheetData, { type: '', list: [], title: '' });
  };
  

  // 弹窗选中回调

  const handleActionSheetSelect = (e) => {
    const { type } = currentActionSheetData;
    if (type === 'ownership') {
      formData.oldtreeownership = e.value
      formData.oldtreeownershipText = e.name
      formRef.value?.validateField('oldtreeownershipText');
    } else if (type === 'level') {
      formData.treelevel = e.value
      formData.treeleveltext = e.name

    } else if (type === 'treeSpecies') {
      formData.treeSpeciesType = e.value
      formData.treeSpeciesTypeName = e.name
      formRef.value?.validateField('treeSpeciesType');

    }
    handleActionSheetClose();
  };

  // 地图选址

  const openMap = () => {
    uni.chooseLocation({

      success: async (res) => {

        formData.growlocation = res.address
        formData.latitude = res.latitude
        formData.longitude = res.longitude

        await nextTick()
        formRef.value?.validateField('growlocation');

      },
      fail: (err) => {
        console.error('地图选择失败', err);
        if (err.errMsg.includes('auth deny')) {

          uni.showToast({ title: '请授权位置权限', icon: 'none' });

        }
      }
    });
  }
  

  // 提交表单

  const submit = async () => {
    if (loadingFlag.value) return

    for (const key in formData) {
      if (typeof formData[key] === 'string') {
        formData[key] = filterEmoji(formData[key]).trim();
      }
    }
  

    const valid = await formRef.value.validate()
    if (!valid) return

    const uploadImgUrls = treeImgs.getSuccessImgUrls()

    formData.maintainunit = userStore.userInfo.user.companyId

    formData.treeImgList = uploadImgUrls

    loadingFlag.value = true

    try {

      await addTree(formData)
      uni.showToast({ title: "新增成功", icon: "success" });
      uni.redirectTo({ url: '/pages-sub/data/tree-archive/index' });

    } catch (err) {

      uni.showToast({ title: "新增失败，请重试", icon: "none" });

      console.error(err)
    } finally {
      loadingFlag.value = false
    }
  }
  </script>
  
  <style scoped lang="scss">

  .page-container {

    padding: 15px;

    box-sizing: border-box;
    background: #fff;
  }
  
  .animated-area {
    transition: all 0.3s ease-out;
    margin-top: 10rpx;
  }

  .location-form-item {
    padding-right: 10rpx;
  }

  .form-row-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;

    :deep(.u-form-item) {
      position: relative;
      margin-bottom: 0 !important;
    }

    :deep(.u-form-item__body__right__message) {

      position: absolute;
      left: 0;
      bottom: -20rpx;
      line-height: 20rpx;
      font-size: 22rpx;
      color: #f56c6c;
      width: 100%;
      box-sizing: border-box;
    }
  }

  .form-row-wrap + .u-form-item {
    margin-top: 25rpx !important;
  }

  </style>