항목 일괄 수정 - PUT
scope
값을 줘서 $index
와 함께 사용:data="items"
안에 다 넣어서 가져옴this.items = response.data.result;
scope
와 $index
를 사용하여 테이블에 넣는다.<template>
<div>
<h3>ItemUpdateBatch.vue</h3>
<hr>
{{this.items}}
<hr>
<el-table :data="items" style="width: 100%" >
<el-table-column label="번호" width="50">
<template #default="scope">
{{scope.$index}}
</template>
</el-table-column>
<el-table-column label="물품명" >
<template #default="scope">
{{scope.$index}}
<el-input v-model="items[scope.$index].name"
placeholder="물품명"></el-input>
<!-- 이렇게 쓰라고 정의 되어 있음. -->
</template>
</el-table-column>
<el-table-column label="물품내용">
<template #default="scope">
{{scope.$index}}
<el-input v-model="items[scope.$index].content"
placeholder="물품내용"></el-input>
</template>
</el-table-column>
<el-table-column label="가격">
<template #default="scope">
{{scope.$index}}
<el-input v-model="items[scope.$index].price"
placeholder="가격"></el-input>
</template>
</el-table-column>
<el-table-column label="수량">
<template #default="scope">
{{scope.$index}}
<el-input v-model="items[scope.$index].quantity"
placeholder="수량"></el-input>
</template>
</el-table-column>
<el-table-column label="이미지">
<template #default="scope">
<img :src="items[scope.$index].image1" style="width:100px;" />
<input type="file" @change="handleImage($event,scope.$index)" />
</template>
</el-table-column>
</el-table>
<el-form :inline="true" >
<el-form-item >
<el-button @click="handleUpdateBatch"
type="primary">물품일괄수정</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
mounted(){
// 새로고침 처리
// console.log(this.code);
if(typeof this.code ==='undefined'){
this.$router.back();
}
else{
this.handleData();
}
},
data(){
return{
code : this.$route.params.code,
items : [],
}
},
methods : {
handleImage(e, idx){
console.log("ItemUpdateBatch.vue => handleImage");
console.log(e, idx);
// e : 실제파일 정보
// idx : 실제파일 위치정보
// e.target.files 여기에 이미지가 첨부되어있음
// this.items[idx].image = e.target.files[0];
// 파일 선택할때마다 items의 image값이 [object File]로 바뀜
// this.items[idx].imageurl = URL.createObjectURL(e.target.files[0]);
// image : 수정전의 이미지
// imagedata : 수정하는 이미지파일 (데이터)
// image1 : 수정하는 이미지 미리보기 URL (미리보기로 써야 될 변수명)
// 가장 먼저 할 일은 image를 image1에 카피 해야함.
// image는 백업용
if(e.target.files.length > 0 ) { //0보다 크다는 말은 일단 파일은 첨부되어있다는 뜻
this.items[idx].imagedata = e.target.files[0];
// this.items[idx]['imagedata'] = e.target.files[0];
this.items[idx].image1
= URL.createObjectURL( e.target.files[0] );
}
else { // 이미지 첨부하지 않음
this.items[idx].imagedata = null;
this.items[idx].image1 = this.items[idx]['image']
// 수정이기떄문에 default 이미지를 안쓰고 기존이미지를 보이게 한다.
// 취소하면 원래 원본이미지가 여기로 온다.
}
// console.log(this.items.imageurl);
},
async handleUpdateBatch(){
console.log("ItemInsertBatch.vue => handleUpdateBatch");
const url = `/item/updatebatch`;
const headers = {"Content-Type":"multipart/form-data"};
const body = new FormData();
for(let tmp of this.items){
body.append("code", tmp._id);
body.append("name", tmp.name);
body.append("content", tmp.content);
body.append("price", tmp.price);
body.append("quantity", tmp.quantity);
body.append("file", tmp.imagedata);
}
const response = await this.axios.put(url, body, {headers:headers});
console.log(response);
if(response.data.status === 200){
alert('일괄수정되었습니다');
this.$router.push({name:'Seller'})
// console.log(response);
}
},
async handleData(){
// console.log('ItemUpdateBatch.vue => handleData');
// string을 다시 array로 바꿈
this.code = JSON.parse(this.code);
// [{code:1},{code:2},{code:3}] => [1,2,3]
// 이렇게 넘어왔다. (tmp._id)
// code : this.$route.params.code,
// [
// {
// "code": 10028
// },
// {
// "code": 10027
// }
// ]
let arr = []; // [{code:1},{code:2}] => [1,2]
for(let tmp of this.code){
// console.log('ItemUpdateBatch => tmp.code', tmp.code);
arr.push(tmp.code)
}
// console.log('ItemUpdateBatch => arr', arr);
const url = `/item/selectcheck`;
const headers = {"Content-Type":"application/json"};
const body = {chks:arr}; //{"chks" : [10032, 10038, 10039]}
const response = await this.axios.post(
url,
body,
{headers : headers}
);
console.log(response.data.result);
if(response.data.status === 200){
this.items = response.data.result;
// 이 시점에 image1은 없음
// 데이터를 받은 시점에 아래와같이 데이터를 미리 세팅하는 작업이 더 효율적이다
// 미리보기를 위한 image1 key 추가(복사)
// 이거 중요!
for(let tmp of this.items){
tmp['image1'] = tmp['image']
}
}
}
}
}
</script>
<style scoped>
</style>