<template>
<div>
<el-card class="fade-in-left">
<h3>물품등록</h3>
<el-upload style="margin-left:120px;" action="#"
list-type="picture-card"
:on-preview = "handlePictureCardPreview"
:on-remove = "handleRemove"
:on-change = "handleChange"
:auto-upload = "false">
<el-icon><plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img style="width:100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="물품명">
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-form-item label="내용">
<el-input type="textarea" v-model="item.content"></el-input>
</el-form-item>
<el-form-item label="가격">
<el-input type="text" v-model="item.price"></el-input>
</el-form-item>
<el-form-item label="수량">
<el-input type="text" v-model="item.quantity"></el-input>
</el-form-item>
<el-button type="primary" style="margin-left:120px" @click="handleInsert"> 등록 </el-button>
</el-form>
</el-card>
</div>
</template>
<script>
import { Plus } from '@element-plus/icons-vue'
export default {
components: {
Plus,
},
data() {
return {
item: {
image : null,
name : '',
content : '',
price : 0,
quantity: 1000,
},
dialogImageUrl: '',
dialogVisible : false,
}
},
methods: {
async handleInsert(){
if(this.item.image === null) {
alert('이미지를 첨부하세요');
return false;
}
if(this.item.name === '') {
alert('물품명을 입력하세요');
return false;
}
if(this.item.content === '') {
alert('내용을 입력하세요');
return false;
}
if(this.item.price <= 0) {
alert('가격을 입력하세요');
return false;
}
const url = `/item/insert`;
const headers = {"Content-Type":"multipart/form-data"};
let body = new FormData();
body.append("file", this.item.image);
body.append("name", this.item.name);
body.append("content", this.item.content);
body.append("price", this.item.price);
body.append("quantity", this.item.quantity);
const response = await this.axios.post(url, body, {headers: headers});
console.log(response.data);
if(response.data.status === 200) {
alert('등록되었습니다.');
this.$router.push({name:"Seller"});
}
},
handleChange(file, fileList) {
console.log('handleChange')
console.log(file, fileList)
this.item.image = file.raw;
},
handleRemove(file, fileList) {
console.log(file, fileList)
this.item.image = null;
},
handlePictureCardPreview(file) {
console.log('handlePictureCardPreview');
console.log(file);
this.dialogImageUrl = file.url
this.dialogVisible = true
},
},
}
</script>
<style scoped>
</style>