父页面动态表单
<template>
<view>
<form @submit="formSubmit" class="grace-form">
<view v-for="(item,index) in formData.students" :key="index">
<view class="flex-start line-goods">
<view>损耗数量:</view>
<view>
<input v-model="item.bad_count" type="number" class="inputcs" />
</view>
</view>
<view class="flex-start line-goods">
<view class="goods-tit">归还照片:</view>
<view>
<!--upimage是上传图片子组件,同过index判断不同的值。-->
<upimage :tourid="tour_id" @files="getFiles" :index="index">
</upimage>
</view>
</view>
</view>
<view class=" line-btn" @tap="submit">提交</view>
</form>
</view>
</template>
<script>
import upimage from '../../../graceUI/components/backgoods.vue'
export default {
components: {
upimage
},
data() {
return {
used_give: null,
tour_id: null,
// formData 用于记录全部表单数据
formData: {
students: []
},
filesa: null
}
},
onLoad(option) {
this.tour_id = option.tour_id
this.getmaterialList()
},
methods: {
//得到子组件返回的值+index
getFiles(vals) {
const {v,index} = vals
if (v) {
this.formData.students[index].file = v;
}
},
getmaterialList() {
this.$http.get('/XXXXXXXXXXX', {
tour_id: this.tour_id
}).then(res => {
if (res.data.result === 1) {
let server = res.data.data
server.forEach(item => {
this.formData.students.push({
goods_id: item.goods_id,
goods_name: item.goods_name,
goods_count: item.used_count,
goods_src: this.$url + item.goods_src,
file: ''
})
})
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
})
},
submit: function() {
// 请利用 v-model 将表单元素数据全部记录在 formData 变量内
// 提交时即可获取全部表单数据
console.log(this.formData);
},
}
}
</script>
子页面
//从父页面接收过来值
props: ['tourid', 'index'],
methods: {
submit() {
//获取图片路径,拆分上传图片的路径拼接
let imgpat = this.$refs.uUpload.lists;
let str = ''
for (var i = 0; i < imgpat.length; i++) {
str += imgpat[i].response.data + ",";
}
str = str.slice(0, str.length - 1);
this.files.push(this.$url + str);
//通过$emit传给父页面
this.$emit('files', {
index: this.index,
v: this.files
});
//关闭图片上传
this.$refs.popup.close();
},
}