<template>
<div>
<h2>물품일괄수정</h2>
<hr />
<el-button size="small" type="primary" @click="handleUpdateBatchAction()">물품일괄수정</el-button>
<el-card shadow="always">
<el-table :data="items" style="width: 100%; margin-top:20px;" size="mini">
<el-table-column label="" width="50">
<template>
<input type="checkbox" v-model="items.chk1"/>
</template>
</el-table-column>
<el-table-column label="번호" width="80">
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="물품명" width="80">
<template #default="scope">
<el-input type="text" v-model="items[scope.$index].name"></el-input>
</template>
</el-table-column>
<el-table-column label="물품내용" width="400">
<template #default="scope">
<el-input type="textarea" v-model="items[scope.$index].content"></el-input>
</template>
</el-table-column>
<el-table-column label="가격" width="80">
<template #default="scope">
<el-input type="text" v-model="items[scope.$index].price"></el-input>
</template>
</el-table-column>
<el-table-column label="수량" width="80">
<template #default="scope">
<el-input type="text" v-model="items[scope.$index].quantity"></el-input>
</template>
</el-table-column>
<el-table-column label="이미지" width="500">
<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-card>
</div>
</template>
<script>
export default {
mounted() {
if(typeof this.code === 'undefined'){
this.$router.back();
}
else{
this.handleData();
}
},
data() {
return {
items: [],
code : this.$route.params.code,
}
},
methods: {
async handleData() {
console.log("ItemUpdateBatch.vue => handleData");
this.code = JSON.parse(this.code);
console.log(this.code);
let arr = [];
console.log(this.code[0].code);
for(let tmp of this.code) {
arr.push(tmp.code);
}
const url = `item/selectcheck`;
const headers = { "Content-Type":"application/json" };
const body = { chks: arr };
const response = await this.axios.post(url, body, {headers:headers});
console.log(response.data);
if(response.data.status === 200) {
this.items = response.data.result;
for(let tmp of this.items) {
tmp['image1'] = tmp['image']
tmp['imagedata'] = null;
}
}
},
async handleUpdateBatchAction() {
console.log("ItemUpdateBatch.vue => handleUpdateBatchAction");
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' });
}
},
async handleImage(e, idx) {
console.log("ItemUpdateBatch => handleImage");
console.log(e, idx);
if(e.target.files.length > 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'];
}
}
}
}
</script>
<style scoped>
</style>