ItemInsert.vue

팡태(❁´◡`❁)·2022년 1월 7일
0

vue2

목록 보기
22/26
<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);

                // console.log(URL.createObjectURL(file.raw)); << 임시URL만드는거. 지금은 필요업승ㅁ

                this.dialogImageUrl = file.url // 임시 이미지 주소
                this.dialogVisible = true      // 다이얼로그 표시
            },
        },
    }
</script>

<style scoped>

</style>

0개의 댓글