123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <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>
-
|