参数配置表单校验

参数配置表单校验

1. 给设置参数绑定一个确认提示框的点击事件，我们希望达成的效果：
   • 第一是为了让用户确认是否要用表单中的各个参数的值进行参数设定
   • 第二是在设置参数时我们需要进行一个参数配置的表单校验，点击模态框的确认后，如果校验通过那么配置生效，校验不通过就关闭模态框返回页面，页面会有错误提示，直至修改为我们规定的范围才可以进行数据提交。
2. 给表单校验添加验证规则，以达到在前端输入时就为有效输入值的目的。
   • 限定了范围的表单参数均设置为number类型，和后端保持一致
   • 限制最小和最大范围，并将表单数据类型强制转换为number类型
   • 问题：即使后端将数据设置为数字整型，前端因为input值默认是string，所以也将数据设置为number类型，但是表单在验证其范围时，数字类型的声明依然失效了，验证规则不生效。所以我们在校验rules添加字符串强制转换数字的方法transform (value) { return Number(value) }，这样不管怎样输入，表单验证都始终生效。

<FormItem class="margin-bottom-0">
    <Button type="primary" v-has="'AccessParameter/index'" @click="getParameters" :loading="loading.getParameters" class="margin-right-10">获取参数</Button>
    // 绑定确认提示框的点击事件，并设置为true
    <Button type="primary" v-has="'AccessParameter/setParameter'" @click="confirmSetParameters = true">设置参数</Button>
</FormItem>
...
// 参数列表表单
<Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="250" label-position="left" class="margin-left-10">
    <FormItem label="更新时间" prop="update_time" style="font-weight: bolder;">
        <Input v-model="formItem.update_time" placeholder="更新时间" style="width: 500px;"></Input>
    </FormItem>
    <FormItem label="车载终端本地存储时间周期" prop="local_save_interval" style="font-weight: bolder;">
        <Input v-model="formItem.local_save_interval" placeholder="车载终端本地存储时间周期" style="width: 500px;"></Input>
        <span class="margin-left-10" style="font-weight: bolder;">ms</span>
    </FormItem>
    ...正常时, 信息上报周期...
    ...报警时, 信息上报周期...
    ...远程服务与管理平台域名长度...
    ...远程服务与管理平台域名...
    ...远程服务与管理平台端口...
    ...硬件版本...
    ...固件版本...
    ...车载终端心跳发送周期...
    ...终端应答超时时间...
    ...平台应答超时时间...
    ...重新登录间隔时间...
    ...公共平台域名长度...
    ...公共平台域名...
    ...公共平台端口...
    ...抽样监测...
</Form>

// 参数设置提示模态框，绑定点击
<Modal v-model="confirmSetParameters" width="360">
    <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>参数设置提示</span>
    </p>
    <div style="text-align:left">
        <p>参数设定会用表单中的各个参数的值进行设定, 请确认是否继续?</p>
    </div>
    <div slot="footer">
        // 绑定取消设置参数的点击事件
        <Button type="text" @click="cancelSetParameters">取消</Button>
        // 添加加载中的状态，绑定设置参数的点击事件
        <Button type="primary" :loading="loading.setParameters" @click="setParameters">确定</Button>
    </div>
</Modal>

export default {
  name: 'AccessParameter_list',
  data () {
    return {
      confirmSetParameters: false,
      // 初始化一个空数组用于存放 VIN 数据
      vinList: [],
      formItem: {
        vselect: '',
        vin: '',
        update_time: '',
        local_save_interval: '',
        normal_upload_interval: '',
        warn_upload_interval: '',
        platform_domain_len: '',
        platform_domain: '',
        platform_port: '',
        hardware_ver: '',
        firmware_ver: '',
        keep_live_interval: '',
        vehicle_terminal_timeout: '',
        platform_timeout: '',
        post_relogin_interval: '',
        public_platform_domain_len: '',
        public_platform_domain: '',
        public_platform_port: '',
        sampling_monitoring: ''
      },
      // 获取参数和设置参数按钮的加载状态
      loading: {
        getParameters: false,
        setParameters: false
      },
      ruleValidate: {
        // 表单验证规则，设置type: 'number'，字符串强制转换数字
        local_save_interval: [
          { required: true, message: '请输入车载终端本地存储时间周期' },
          { type: 'number', min: 0, max: 60000, message: '有效值范围0~60000', transform (value) { return Number(value) } }
        ],
        normal_upload_interval: [
          { required: true, message: '请输入正常时, 信息上报周期' },
          { type: 'number', min: 0, max: 600, message: '有效值范围0~600', transform (value) { return Number(value) } }
        ],
        warn_upload_interval: [
          { required: true, message: '请输入报警时, 信息上报周期' },
          { type: 'number', min: 0, max: 60000, message: '有效值范围0~60000', transform (value) { return Number(value) } }
        ],
        platform_domain_len: [
          { required: true, message: '请输入远程服务与管理平台域名长度' }
        ],
        platform_domain: [
          { required: true, message: '请输入远程服务与管理平台域名' }
        ],
        platform_port: [
          { required: true, message: '请输入远程服务与管理平台端口' },
          { type: 'number', min: 0, max: 65531, message: '有效值范围0~65531', transform (value) { return Number(value) } }
        ],
        keep_live_interval: [
          { required: true, message: '请输入车载终端心跳发送周期' },
          { type: 'number', min: 1, max: 240, message: '有效值范围1~240', transform (value) { return Number(value) } }
        ],
        vehicle_terminal_timeout: [
          { required: true, message: '请输入终端应答超时时间' },
          { type: 'number', min: 1, max: 600, message: '有效值范围1~600', transform (value) { return Number(value) } }
        ],
        platform_timeout: [
          { required: true, message: '请输入平台应答超时时间' },
          { type: 'number', min: 1, max: 600, message: '有效值范围1~600', transform (value) { return Number(value) } }
        ],
        post_relogin_interval: [
          { required: true, message: '请输入重新登录间隔时间' },
          { type: 'number', min: 0, max: 65531, message: '有效值范围0~65531', transform (value) { return Number(value) } }
        ],
        public_platform_domain_len: [
          { required: true, message: '请输入公共平台域名长度' }
        ],
        public_platform_domain: [
          { required: true, message: '请输入公共平台域名' }
        ],
        public_platform_port: [
          { required: true, message: '请输入公共平台端口' }
        ],
        sampling_monitoring: [
          { required: true, message: '请输入抽样监测' },
          { type: 'number', min: 1, max: 2, message: '1表示是, 2表示否', transform (value) { return Number(value) } }
        ]
      }
    }
  },
  mounted () {
    let vm = this
    // 在组件挂载时调用获取 VIN 列表
    vm.fetchVinList()
  },
  methods: {
    // 获取 VIN 列表数据
    fetchVinList () {
      ...
    },
    // 获取参数
    getParameters () {
      let vm = this
      // 设置加载状态为true
      vm.loading.getParameters = true
      getParams(vm.formItem.vselect).then(response => {
        // 设置加载状态为false
        vm.loading.getParameters = false
        // 处理获取到的参数数据，合并到formItem中
        vm.formItem = { ...vm.formItem, ...response.data.data.data }
        vm.$Message.success(response.data.msg)
        console.log('获取参数成功')
      }).catch(() => {
        // 设置加载状态为false
        vm.loading.getParameters = false
      })
    },
    // 设置参数
    setParameters () {
      let vm = this
      // 提交表单进行校验
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          // 设置加载状态为true
          vm.loading.setParameters = true
          setParams(vm.formItem).then(response => {
            vm.$Message.success(response.data.msg)
            console.log('设置参数成功')
            // 设置加载状态为false
            vm.loading.setParameters = false
            // 设置模态框状态为false
            vm.confirmSetParameters = false
          }).catch(() => {
            // 设置加载状态为false
            vm.loading.setParameters = false
            // 设置模态框状态为false
            vm.confirmSetParameters = false
          })
        } else {
          // 表单校验不通过，关闭模态框
          vm.confirmSetParameters = false
        }
      })
    },
    // 取消设置参数
    cancelSetParameters () {
      // 关闭模态框
      this.confirmSetParameters = false
      // 取消设置参数按钮的加载中状态
      this.loading.setParameters = false
    }
  }
}

设备管理表单校验

ruleValidate: {
    car_name: [
        { required: true, message: '车辆名称不能为空', trigger: 'blur' },
        { max: 50, message: '请填写名称，不能超过50个字符', trigger: 'blur' }
    ],
    vin: [
        { required: true, message: 'VIN码不能为空', trigger: 'blur' },
        { min: 17, max: 17, message: '请填写17位VIN码', trigger: 'blur' }
    ]
},