agri-app/components/addAgri/addAgri.vue

<template>
  <view>
    <uni-popup  ref="addForm" mode="center" >
      <!-- 新增：修改运行时间的弹窗 -->
      <view class="modal-container">
        <view class="modal-title">{{ `添加大棚` }}</view>
        <uni-forms ref="form" :model="formData" :rules="rules" label-width="180rpx" validateTrigger="blur">
          <uni-forms-item label="大棚名称：" name="agriName" required>
            <uni-easyinput type="text" v-model="formData.agriName" placeholder="请输入大棚名称" />
          </uni-forms-item>
          <uni-forms-item label="设备imei：" name="imei" required>
            <uni-easyinput   v-model="formData.imei" placeholder="在此输入设备imei号" >
              <template #right>
                <yt-scanCode  @getScanCode="getScanCode"></yt-scanCode>
              </template>
            </uni-easyinput>
          </uni-forms-item>
        </uni-forms>

        <view class="modal-input-wrap" >
          <text class="modal-label"></text>
          <uni-icons type="info" size="15" color="#666"/>
          <text class="modal-text">可直接点击右侧扫描设备二维码；<br>
            如若失效，亦可手动输入设备imei号。</text>
        </view>
        <view class="modal-btn-wrap">
          <button class="modal-btn cancel" @click="close">取消</button>
          <button class="modal-btn confirm" @click="confirm">确定</button>
        </view>
      </view>
    </uni-popup>

  </view>
</template>
<script>
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import {addAgriMobile} from "../../api/system/assets/agri";
import {updateSubscribeTopic} from "../../utils/mqtt";
import {batchUnsubscribe} from "../../api/system/mqtt";
import * as mqttUtil from "../../utils/mqtt";

export default {
  name: "addAgri",
  components: {UniPopup},
  data() {
    return {
      formData: {
        agriName: null,
        imei: null,
        sourceCode:0
      },
      rules: {
        agriName: {
          rules:[
            {
              required: true,
              errorMessage: '请输入温室名称！',
            }
          ]
        },
        // 对name字段进行必填验证
        imei: {
          // name 字段的校验规则
          rules:[
            // 校验 name 不能为空
            {
              required: true,
              errorMessage: '请输入设备imei！',
            },
            // 对name字段进行长度验证
            {
              minLength: 15,
              maxLength: 15,
              errorMessage: '{label}不合法！需为 {maxLength} 位！',
            },
            {
              pattern: '^\\d{15}$', // 核心正则
              errorMessage: '请输入15位纯数字编号'
            }
          ],
          // 当前表单域的字段中文名，可不填写
          label:'设备imei'
        }
      }
    }
  },
  methods:{
    close() {
      this.$refs.addForm.close();
    },
    confirm() {
      this.$refs.form.validate().then(res => {
        addAgriMobile(this.formData).then((response) => {
          if (response.code===200) {
            uni.showModal({
              title: `${response.data.code===1?"✅":"⚠️"}操作提示`,
              content: `${response.data.msg}`,
              showCancal: false,
              confirmText: '确定',
              success: (res) => {
                // 4. 只有用户点击弹窗的“确定”后，才执行后续操作
                if (res.confirm) {
                  this.$emit("reload"); // 向父组件传值触发刷新
                  batchUnsubscribe({clientId: mqttUtil.getMqttState().clientId}).then(response => {
                    if (response.code === 200) {
                      updateSubscribeTopic();
                    }
                  })
                  this.close(); // 关闭添加大棚的弹窗（移到这里）
                }
              }
            })
          }
        })
      }).catch(err => {
        return
      })
    },
    open() {
      this.formData = {
        agriName: null,
            imei: null,
            sourceCode:0
      };
      this.$refs.addForm.open();
    },
    getScanCode(res){
      this.formData.imei = res;
    }
  }
}
</script>
<style scoped >

/* 新增：弹窗样式 */
.modal-container {
  width: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
}
.modal-title {
  font-size: 30rpx;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}
.modal-input-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  margin-left: 20rpx;
}
.modal-input-wrap:nth-child(2) {
  margin-bottom: 35rpx;
}
.modal-label {
  width: 140rpx;
  color: #666;
}

.modal-btn-wrap {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}
.modal-btn {
  flex: 1;
  height: 70rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.modal-btn.cancel {
  background: #f5f5f5;
  color: #666;
}
.modal-btn.confirm {
  background: #007aff;
  color: #fff;
}
.modal-text {
  font-size: 22rpx;
  color: #6C6C6C;
  margin-left: 6rpx;
}
/deep/ .uni-forms-item__label {
  padding: 0!important;
  margin-left: 20rpx;
  width: 154rpx!important;
}

/deep/ .uni-forms-item:nth-child(2) {
  margin-bottom: 24rpx;
}
</style>