<template>
<view>
<uni-forms ref="form1" :rules="rules1" :value="formData1">
<uni-forms-item label="标题" name="instTitle" required>
<uni-easyinput type="text" v-model="formData1.instTitle" placeholder="请输入标题" />
</uni-forms-item>
<uni-forms-item label="描述" name="instDesc" required>
<uni-easyinput type="text" v-model="formData1.instDesc" placeholder="请输入描述" />
</uni-forms-item>
</uni-forms>
<uni-forms ref="form" :rules="rules" :value="formData">
<view v-for="(item, index) in fromJson" :key="index">
<uni-forms-item :label="item.name" :name="item.field" :required='item.require'>
<uni-easyinput type="text" v-model="formData[item.field]" v-if="item.formType == 0" :placeholder="item.placeholder || '请输入'+item.name" />
<uni-easyinput type="textarea" v-model="formData[item.field]" v-else :placeholder="item.placeholder || '请输入'+item.name" />
</uni-forms-item>
</view>
<button v-if="hidden!=2" type="primary" @click="submit">确定</button>
</uni-forms>
</view>
</template>
<script>
import {
getNewFormJsonString,
getNewAnnexJsonString,
getNewAnnexJsonNull
} from '@/common/formJson.js'
import {
uniForms,
uniFormsItem,
uniEasyinput
} from '@dcloudio/uni-ui'
export default {
components: {
uniForms,
uniFormsItem,
uniEasyinput
},
data() {
return {
itemData: [],
hidden: null,
fromJson: [],
annexJson: [],
versionNumber: null,
columnCode:null,
id: null,
formData1: {
instTitle: '',
instDesc: ''
},
formData: {
},
rules: {
},
rules1: {
instTitle: {
rules: [{
required: true,
errorMessage: '请输入',
}, {
maxLength: 50,
minLength: 1,
errorMessage: '请输入少于五十个字符'
}]
},
instDesc: {
rules: [{
required: true,
errorMessage: '请输入',
}, {
maxLength: 50,
minLength: 1,
errorMessage: '请输入少于五十个字符'
}]
}
}
}
},
onLoad(e) {
this.columnCode = e.flowCode
if (e.a) {
this.hidden = e.a
this.itemData = JSON.parse(e.item)
this.fromJson = JSON.parse(this.itemData.formJson)
this.annexJson = this.itemData.annexJson
this.id = this.itemData.id
this.versionNumber = this.itemData.versionNumber
this.formData1.instDesc = this.itemData.instDesc
this.formData1.instTitle = this.itemData.instTitle
this.rulesData(this.fromJson)
} else {
this.getData();
}
},
methods: {
getData() {
var params = {
flowCode: this.columnCode
}
this.config.getRequest('/flow/inst/getBaseFlow', params).then(res => {
if (res.data.code == 0) {
this.fromJson = JSON.parse(res.data.data.fromJson)
var fromJson = JSON.parse(res.data.data.fromJson)
this.$nextTick(()=>{
this.rulesData(fromJson)
})
this.annexJson = res.data.data.annexJson
this.versionNumber = res.data.data.versionNumber
} else {
}
}).catch(err => {
});
},
submit() {
this.$refs.form1.submit().then(res => {
console.log('表单数据信息：', res);
this.$refs.form.submit().then(resdata => {
console.log('表单数据信息111：', resdata);
var that = this
if (that.hidden) {
var obj = getNewFormJsonString(that.fromJson, that.$refs.form.value)
var params = {
flowCode: that.columnCode,
versionNumber: that.versionNumber,
annexJson: that.annexJson,
formJson: obj,
instTitle: that.formData1.instTitle,
instDesc: that.formData1.instDesc,
id: that.id
}
that.config.postRequest('/flow/inst/update', params).then(res => {
if (res.data.code == 0) {
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 前一个页面
uni.navigateBack({
success: function() {
beforePage.$refs.one[0].pageNo=1
beforePage.$refs.one[0].getData(); // 执行前一个页面的onLoad方法
console.log(beforePage)
}
});
} else {
}
}).catch(err => {
});
} else {
var obj = getNewFormJsonString(that.fromJson, resdata)
var params = {
flowCode: that.columnCode,
versionNumber: that.versionNumber,
annexJson: that.annexJson,
formJson: obj,
instTitle: that.formData1.instTitle,
instDesc: that.formData1.instDesc
}
that.config.postRequest('/flow/inst/save', params).then(res => {
if (res.data.code == 0) {
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 前一个页面
uni.navigateBack({
success: function() {
beforePage.$refs.one[0].pageNo=1
beforePage.$refs.one[0].getData(); // 执行前一个页面的onLoad方法
console.log(beforePage)
}
});
} else {
}
}).catch(err => {
});
}
}).catch(err => {
console.log('表单错误信息：', err);
})
}).catch(err => {
console.log('表单错误信息：', err);
})
},
rulesData(fromJson){
console.log(fromJson)
let myRules={
};
let myFormData={
};
for (var i in fromJson) {
var field = fromJson[i].field
myFormData["" + field + ""] = fromJson[i].val || ''
var requireStr = fromJson[i].require
var rulesArr = []
//必填验证 添加规则
if(requireStr==true || requireStr=='true'){
var rulesFieldObj = {
}
rulesFieldObj.required = fromJson[i].require
rulesFieldObj.errorMessage = '请输入'
rulesArr.push(rulesFieldObj)
//添加其他验证 扩展部分
myRules[field]={
rules:[]}
myRules[field].rules=rulesArr;
}else{
continue
//结束本次循环，进入下次循环
}
}
this.rules=myRules;
this.formData=myFormData;
}
}
}
</script>
<style>
page {
background: #FFFFFF;
}
/* 将三个内容view的display设置为none(隐藏) */
.end-title {
display: flex;
height: 90upx;
align-items: center;
font-size: 34upx;
background: #FFFFFF;
}
.end-title view {
flex-grow: 1;
text-align: center;
padding: 10upx 0;
/* margin-bottom: 10upx; */
}
.end-cont {
display: none;
}
.btna {
color: #FFFFFF;
background: #00A0FF;
line-height: 70upx;
}
.dis {
display: block;
}
.uni-swiper-tab {
border-bottom: 1upx solid #EEEEEE;
background-color: #FFFFFF;
display: flex;
height: 90upx;
align-content: space-between;
}
.swiper-tab-list {
color: #969696;
font-weight: bold;
font-size: 34upx;
text-align: center;
}
.uni-tab-bar .active {
color: #343434;
}
.active .swiper-tab-line {
border-bottom: 6upx solid #FEDE33;
/* width: 70upx; */
margin: auto;
border-top: 6upx solid #FEDE33;
border-radius: 20upx;
}
</style>
uniapp之 动态form
猜你喜欢
转载自blog.csdn.net/weixin_42268006/article/details/123082434
今日推荐
周排行