sooka_consult_uniapp/pages/quotations/quotationsForm.vue

<template>
  <uni-section title="自定义校验规则" type="line">
    <view class="example">
      <!-- 自定义表单校验 -->
      <uni-forms ref="customForm" :rules="rules" :modelValue="customFormData" label-align="center">
        <uni-forms-item label="产品名称" required name="productName" label-width="85" label-align="center">
          <uni-easyinput v-model="customFormData.productName" placeholder="请输入产品名称" />
        </uni-forms-item>
        <uni-forms-item label="地区" required name="area" >
          <uni-easyinput v-model="customFormData.area" placeholder="请输入地区" />
        </uni-forms-item>
        <uni-forms-item label="价格" required name="price" >
          <uni-easyinput v-model="customFormData.price" placeholder="请输入价格" />
        </uni-forms-item>
        <uni-forms-item label="手机号" required name="phone" >
          <uni-easyinput v-model="customFormData.phone" placeholder="请输入手机号" />
        </uni-forms-item>
        <uni-forms-item label="地址" required name="address">
          <uni-easyinput v-model="customFormData.address" placeholder="请输入地址" />
        </uni-forms-item>
        <uni-forms-item label="类型" required name="type" >
          <uni-data-picker placeholder="请选择分类" popup-title="请选择所属分类" :localdata="TreeData" v-model="customFormData.type"/>
        </uni-forms-item>
        <uni-forms-item label="图片" required name="url" label-width="85">
          <upload :imgArr="imageList" :fileSize="1" :limit="3" @updateImg="updateImg"/>
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit('customForm')">提交</button>
    </view>
  </uni-section>
</template>

<script>
import {listConfig,addQuotations} from "@/api/quotations/quotations";
import upload from '../../components/upload/index.vue'
export default {
  components: {
    upload
  },
  data() {
    return {
      // 基础表单数据
      baseFormData: {
        productName: '',
        area:'',
        price:'',
        phone:'',
        address:'',
        type:'',
        url:[]
      },
      //树数据
      TreeData:[],
      // 校验规则
      rules: {
        productName: {
          rules: [{
            required: true,
            errorMessage: '产品名称不能为空'
          }]
        },
        area: {
          rules: [{
            required: true,
            errorMessage: '地区不能为空'
          }]
        },
        phone: {
          rules: [{
            required: true,
            errorMessage: '年龄不能为空'
          }, {
            validateFunction: function(rule, value, data, callback) {
              const reg = /^1[3-9]\.\d{9}$/;
              if (!reg.test(value)) {
                callback('请输入正确的手机号码');
              }
              return true;
            }
          }]
        },
        address: {
          rules: [{
            required: true,
            errorMessage: '地址不能为空'
          }]
        },
        type: {
          rules: [{
            required: true,
            errorMessage: '分类不能为空'
          }]
        },
        imgUrlList: {
          rules: [{
            required: true,
            errorMessage: '图片不能为空'
          }]
        },
        price: {
          rules: [{
            required: true,
            errorMessage: '年龄不能为空'
          }, {
            format: 'number',
            errorMessage: '年龄只能输入数字'
          }]
        }
      },
      imageList: [],
      customFormData:{}
    }
  },
  onLoad() {},
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.customForm.setRules(this.rules)
  },
  created() {
    this.getType();
  },
  methods: {
    getType(){
      listConfig().then(response => {
        this.TreeData = this.formatOptions(response.data.quotations);
      });
    },
    //转换为下拉选列表
    formatOptions(data) {
      return data.map(item => ({
        value: item.id,
        text: item.productName,
        children: item.children ? this.formatOptions(item.children) : null,
      }));
    },
    submit(ref) {
      this.$refs[ref].validate().then(res => {
        if (res) {
          this.customFormData.url = this.imageList.join(',')
          addQuotations(this.customFormData).then(response => {
            this.$modal.msgSuccess('提交成功');
            this.customFormData = {...this.baseFormData};
            this.imageList = [];
            uni.navigateTo({
              url: '../quotations/quotations'
            });
          }).catch(err => {
            console.log('err', err);
          })
        }
      })
    },
    updateImg(imgList) {
      this.imageList = imgList;
    }
  }
}
</script>

<style lang="scss">

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}
</style>