gwlz/jp-mobile/pages/test/mobile/TestMobileForm.vue

<template>
	<view>
		<u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">
       <u-form-item label="姓名" borderBottom prop="name">
           <u--input placeholder='请填写姓名'  v-model="inputForm.name" border="none"></u--input>
		</u-form-item>
       <u-form-item label="年龄" borderBottom prop="age">
           <u--input placeholder='请填写年龄'  v-model="inputForm.age" border="none"></u--input>
		</u-form-item>
       <u-form-item label="地区" borderBottom prop="areaId">
		<jp-area-select v-model="inputForm.areaId"></jp-area-select>
		</u-form-item>
       <u-form-item label="公司" borderBottom prop="company.id">
		<jp-office-select v-model="inputForm.company.id"></jp-office-select>
		</u-form-item>
       <u-form-item label="部门" borderBottom prop="office.id">
		<jp-office-select v-model="inputForm.office.id"></jp-office-select>
		</u-form-item>
       <u-form-item label="性别" borderBottom prop="sex">
    	   <jp-picker v-model="inputForm.sex" rangeKey="label" rangeValue="value" :range="$dictUtils.getDictList('sex')"></jp-picker>
		</u-form-item>
       <u-form-item label="头像" borderBottom prop="teImage">
		<jp-image-upload v-model="inputForm.teImage"></jp-image-upload>
		</u-form-item>
       <u-form-item label="单选框" borderBottom prop="isSingle">
    		<u-radio-group
					 v-model="inputForm.isSingle"
				  >
				    <u-radio
				      :customStyle="{margin: '8px'}"
				      v-for="(option, index) in $dictUtils.getDictList('yes_no')""
				      :key="index"
				      :label="option.label"
				      :name="option.value"
				    >
				    </u-radio>
			</u-radio-group>
		</u-form-item>
       <u-form-item label="多选框" borderBottom prop="cks">
           <jp-checkbox-group v-model="inputForm.cks">
    			<u-checkbox
    				:customStyle="{margin: '8px'}"
    				v-for="(option, index) in $dictUtils.getDictList('oa_leave_type')"
    				:key="index"
    				:label="option.label || option.value"
    				:name="option.value"
    			>
    			</u-checkbox>
    		</jp-checkbox-group>
		</u-form-item>
       <u-form-item label="多行文本框" borderBottom prop="textArea">
           <u--textarea  placeholder='请填写多行文本框'  v-model="inputForm.textArea" ></u--textarea>
		</u-form-item>
       <u-form-item label="数字输入框" borderBottom prop="textNumber">
           <u--input placeholder='请填写数字输入框'  v-model="inputForm.textNumber" border="none"></u--input>
		</u-form-item>
       <u-form-item label="日期选择框" borderBottom prop="teDate">
		<jp-datetime-picker v-model="inputForm.teDate" placeholder="选择日期时间"  mode="datetime"></jp-datetime-picker>
		</u-form-item>
       <u-form-item label="邮箱" borderBottom prop="email">
           <u--input placeholder='请填写邮箱'  v-model="inputForm.email" border="none"></u--input>
		</u-form-item>
       <u-form-item label="手机号" borderBottom prop="phone">
           <u--input placeholder='请填写手机号'  v-model="inputForm.phone" border="none"></u--input>
		</u-form-item>
       <u-form-item label="电话" borderBottom prop="tel">
           <u--input placeholder='请填写电话'  v-model="inputForm.tel" border="none"></u--input>
		</u-form-item>
		</u--form>
		<view class="bottom-wrap flex">
			<u-button
				type="primary"
				text=提交
				@click="formSubmit"
			></u-button>
		</view>
	</view>
</template>

<script>
  import testMobileService from '@/api/test/mobile/testMobileService'
  export default {
    data () {
      return {
        inputForm: {
          id: '',
          name: '',
          age: '',
          areaId: '',
          company: {
            id: ''
          },
          office: {
            id: ''
          },
          sex: '',
          teImage: '',
          isSingle: '',
          cks: '',
          textArea: '',
          textNumber: '',
          teDate: '',
          email: '',
          phone: '',
          tel: ''
        },
        rules: {
			      'name': [
			      {
						required: true,
						message: '姓名不能为空',
						trigger: ['blur', 'change']
				  }],
			      'age': [
			      {
						required: true,
						message: '年龄不能为空',
						trigger: ['blur', 'change']
				  }]
      	}
      }
    },
	async onLoad(query) {
		if(query&&query.id){
		    uni.setNavigationBarTitle({
			    title: "修改移动表单"
			});
			let data = await testMobileService.queryById(query.id)
			this.inputForm = this.recover(this.inputForm, data)
		}else{
		    uni.setNavigationBarTitle({
			    title: "新建移动表单"
			});
		}
	},
    methods: {
      formSubmit: function(e) {
		//定义表单规则
		this.$refs.inputForm.validate().then(res => {
			uni.showLoading()
      		testMobileService.save(this.inputForm).then((data) => {
      			uni.showToast({title:data, icon:"success"});
      			uni.navigateTo({
      			  url: '/pages/test/mobile/TestMobileList'
      			})
      		}).catch((e)=>{
      			
      		})
      		
      	})
      }
    }
  }
</script>