希望实现的功能：父组件发送请求得到数据，并把数据填充到这个子组件中，之后还可以修改子组件的内容或者添加新的子组件【一开始获取用户之前上传的信息，然后用户可以在该信息的基础上修改之前上传的信息，如删掉之前的照片，添加新照片，添加新人员】
目前遇到的问题：
- 添加新子组件后，在空白的子组件中选择新的图片的话会直接删掉该组件，只保留原来一开始从父组件中得到的数据。
- 在原组件上删除掉一张图片，然后新增图片，数据同样会变成从父组件中得到的样子
其中，添加图片的组件使用的是uni-file-picker组件
子组件完整代码
<template>
<view>
<uni-card :isFull="true">
<uni-data-select v-if="selectShow" v-model="value" :localdata="range" @change="change"
style="margin-bottom: 10px;">
</uni-data-select>
<uni-file-picker :value="owner.image" fileMediatype="image" mode="grid" :autoUpload="false" ref="ownerImage"
style="margin-bottom: 10px;" @select="selectImg" @delete="deleteImg"></uni-file-picker>
<button type="warn" @click="del" :disabled="btnDisabled">删除</button>
</uni-card>
</view>
</template>
<script>
import {
orgUseLisr
} from '@/api/proQualityCon/beforehand/teamFormation.js'
export default {
name: "changImg",
props: {
index: {
type: Number,
required: true
},
items: {
type: Array,
default: Array
}
},
data() {
return {
value: null,
orgId: this.$store.state.user.mcid,
//队员列表
range: [],
//输入的队员名称
owner: {
name: '',
image: []
},
selectShow: false, //选择组件一开始隐藏
//删除已上传的图片时保存的数据（该条信息的id）
deleteFileids: '',
//组件删除按钮
btnDisabled: false,
};
},
watch: {
owner: {
handler(newV, oldV) {
this.$emit('uploadData', {
index: this.index,
data: newV
})
},
deep: true
},
items: {
handler(newV, oldV) {
if (newV.length !== 0) {
this.owner = {
...newV[this.index]
}
}
},
immediate: true,
deep: true
}
},
created() {
console.log(this.$props.items)
// console.log(this.owner)
},
mounted() {
this.getOrgUseLisr(false)
// console.log(this.orgId)
},
methods: {
del() {
//自定义事件名，传递的值
this.$emit('deleteIndex', this.index)
},
//选择文件时触发
selectImg() {
console.log(this.$refs.ownerImage.files)
this.owner.image = this.$refs.ownerImage.files
},
// 删除文件时触发
deleteImg(e) {
//e中会保存当前删除图片的信息
if (e.tempFile.id != undefined) {
if (this.deleteFileids == '') {
this.deleteFileids = String(e.tempFile.id);
} else {
this.deleteFileids = this.deleteFileids + "," + e.tempFile.id;
}
this.$emit('daleteFileid', this.deleteFileids);
}
this.owner.image = this.$refs.ownerImage.files;
},
change(e) {
if (this.range[e] != undefined) {
this.owner.name = this.range[e].id
}
},
//获取队员信息
getOrgUseLisr(judge) {
this.range = [];
const orgType = '采样队';
orgUseLisr(this.orgId, orgType).then(response => {
// console.log(response)
if (response.code == 0) {
const {
users
} = response.data;
// console.log(users)
for (let i = 0; i < users.length; i++) {
let org = {
value: i,
text: users[i].nickname,
id: users[i].id
}
this.range.push(org)
}
this.selectShow = true;
if (judge) {
this.value = this.idTranValue(this.owner.name, this.range)
this.btnDisabled = true
// console.log(this.value)
}
}
})
},
//选择器里面由id转为value
idTranValue(id, range) {
for (let i = 0; i < range.length; i++) {
if (id == range[i].id) {
return range[i].value
}
}
},
//将父组件开始传递过来的数据
},
}
</script>
<style>
</style>父组件完整代码
<template>
<view>
<uni-card title="上传相应证书以便审核。" :isFull="true">
<view class="example-body">
<button type="primary" @click="addCom">添加人员</button>
</view>
</uni-card>
<changImg v-for="(item,index) in items" :items="items" :key="index" @deleteIndex='del' @uploadData="getData"
:index="index" @daleteFileid="daleteFileid" v-if="items&&flag"></changImg>
<view>
<view style="height: 100rpx;"></view>
<view class="bottomBut">
<button @click="click()" class="buttombtn" type="primary">{{btnText}}</button>
</view>
</view>
<!-- 弹窗提醒 -->
<view>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog :type="dialogType" cancelText="取消" confirmText="确认" :title="dialogTitle"
:content="dialogContent" @confirm="dialogConfirm(dialogNum)"></uni-popup-dialog>
</uni-popup>
</view>
</view>
</template>
<script>
import {
certificateUp,
certificateRe,
certificateRenew
} from "@/api/sutvey/sutvey.js"
export default {
data() {
return {
cydId: this.$store.state.user.mcid,
//组件的值及名字列表
items: [],
flag: false, //数据没有传到的时候先不要渲染组件
dialogType: '', //弹窗的类型
dialogTitle: '', //弹窗的标题
dialogContent: '', //弹窗的内容
dialogNum: null, //控制判断是什么弹窗点的确认按钮
// 已上传界面的参数
uploadUsername: "",
updateTime: "",
recordId: null,
deleteFileldsValue: '', //删除的证书文件
btnText: '', //上传按钮的文字
};
},
onShow() {
this.getUpImg()
},
methods: {
//点击新增组件
addCom() {
this.items.push({
name: '',
image: []
});
},
//删除组件
del(index) {
if (index !== 0) {
this.items.splice(index, 1)
}
},
//获取传递的数据
getData(val) {
let index = val.index
this.items[index] = val.data
// console.log(JSON.stringify(this.items))
},
click() {
//点击上传按钮之后的操作
const _self = this;
if (_self.btnText == "点击上传") {
if (_self.items[0].name != undefined && _self.items[0].name != null) {
//如果拍照的结果大于1张
_self.dialogType = 'warn';
_self.dialogTitle = '警告';
_self.dialogContent = '请再次确认没有错误，无误后点击确认';
_self.dialogNum = 0;
_self.$refs.alertDialog.open();
} else {
//如果拍照的结果大于1张
_self.dialogType = 'error';
_self.dialogTitle = '错误';
_self.dialogContent = '至少提交一名队员的有效证书！';
_self.dialogNum = 1;
_self.$refs.alertDialog.open();
}
} else {
_self.dialogType = 'warn';
_self.dialogTitle = '警告';
_self.dialogContent = '请再次确认没有错误，无误后点击确认';
_self.dialogNum = 1;
_self.$refs.alertDialog.open();
}
},
//点击弹窗中的同意按钮后执行的操作
dialogConfirm(num) {
const _self = this;
if (num == 0) {
const form = {};
form.files = _self.constructionFiles(_self.items);
//构建formData
const formData = {
'orgId': _self.cydId,
'orgType': "采样队"
}
const photoUserDict = _self.constructionPar(_self.items);
formData["photoUserDict"] = JSON.stringify(photoUserDict);
form.formData = formData;
// console.log(form)
certificateUp(form).then(response => {
// console.log(response)
const {
code
} = response
if (code == 0) {
uni.showToast({
title: '上传成功',
success() {
uni.navigateBack()
}
})
}
})
} else if (num == 1) {
//此时是点击上传修改
const form = {};
console.log(_self.items);
form.files = _self.constructionFiles(_self.items);
//构建formData
const formData = {
'id': _self.recordId,
};
const newPhotoUserDict = _self.constructionPar(_self.items);
formData["newPhotoUserDict"] = JSON.stringify(newPhotoUserDict);
form.formData = formData;
formData["deleteFileIds"] = _self.deleteFileldsValue;
console.log(form)
certificateRenew(form).then(response => {
// console.log(response)
const {
code
} = response
if (code == 0) {
uni.showToast({
title: '上传成功',
success() {
uni.navigateBack()
}
})
}
})
}
},
//构建photoUserDict参数
constructionPar(items) {
let item = {}
for (let i = 0; i < items.length; i++) {
for (let j = 0; j < items[i].image.length; j++) {
const {
url
} = items[i].image[j];
if (url.substr(0, 4) != "http") {
item[items[i].image[j].name] = items[i].name
}
}
}
return item;
},
//构造图片上传中files参数
constructionFiles(items) {
let arr = [];
for (let i = 0; i < items.length; i++) {
for (let j = 0; j < items[i].image.length; j++) {
const {
name
} = items[i].image[j];
const {
url
} = items[i].image[j]
//如果url中开头是http，那么就不添加到数组中，否则就添加
if (url.substr(0, 4) != "http") {
let obj = {
"name": name,
"uri": url
};
arr.push(obj)
}
}
}
return arr
},
//获取上传的照片
getUpImg() {
const orgType = "采样队";
const _self = this;
certificateRe(_self.cydId, orgType).then(response => {
// console.log(response)
if (response.code == 0) {
_self.flag = true;
if (response.data.zzzs.length == 0) {
_self.btnText = "点击上传";
} else {
//回显照片内容
_self.recordId = response.data.id;
_self.items = _self.dataToChild(response.data.zzzs)
_self.btnText = "点击上传修改";
}
}
})
},
//将获取的数据按照特定的格式拼凑，尤其是回显的内容
dataToChild(list) {
let items = [];
for (let i = 0; i < list.length; i++) {
if (i != 0 && list[i].userId == list[i - 1].userId) {
//同一个人的证书
let imageItem = {
"name": list[i].name,
"extname": list[i].name.split('.').pop(),
"url": list[i].path,
"id": list[i].id
};
items[items.length - 1].image.push(imageItem);
} else {
let item = {}
item["name"] = list[i].userId
item["image"] = [{
"name": list[i].name,
"extname": list[i].name.split('.').pop(),
"url": list[i].path,
"id": list[i].id
}]
items.push(item)
}
}
// console.log(items)
return items;
},
//获取删除的已上传的图片
daleteFileid(data) {
// console.log(data)
this.deleteFileldsValue = data
}
}
}
</script>
<style lang="scss">
</style>HbuildX的版本是3.6.8.20221027-alpha，运行环境：安卓8
希望有大佬可以帮忙解答一下，目前我都不知道应该从什么地方解决问题，求大佬们帮帮忙！
