seller/Menu1Insert 물품등록

<template>
    <div>
        <h3>Menu1Insert.vue</h3>
        
        <br />
        <el-card class="fade-in-left">
            <el-button @click="handleAdd">항목추가</el-button>
            <el-button @click="handleSub">항목삭제</el-button>
            <br />

            <table style="width: 1000px; ">
                <tr>
                    <th>이미지</th>
                    <th>물품명</th>
                    <th>가격</th>
                    <th>수량</th>
                    <th>설명</th>
                </tr>
                <tr v-for="(tmp, idx) in state.cnt" :key="tmp" style="width:200px;" >
                    <td><input type="file" @change="handleImage($event, idx)"/></td>
                    <td><el-input type="text" placeholder="물품명" v-model="state.items[idx].name" style="width:200px;" /></td>
                    <td><el-input type="text" placeholder="가격" v-model="state.items[idx].price" style="width:200px;" /></td>
                    <td><el-input type="text" placeholder="수량" v-model="state.items[idx].quantity" style="width:200px;" /></td>
                    <td><el-input type="text" placeholder="설명" v-model="state.items[idx].content" style="width:200px;" /></td>
                </tr>
            </table>
            <el-button @click="handleInsertAction">일괄추가</el-button>
        </el-card>
    </div>
</template>
<script>
import { reactive } from '@vue/reactivity';
import axios from 'axios';
import { useRouter } from 'vue-router';

export default {
    setup() {
        const router = useRouter();

        const state = reactive({
            cnt: 2,
            token: sessionStorage.getItem("TOKEN"),
            items: [
                {
                name    : '',
                quantity: '',
                price   : '',
                content : '',
                image   : require('../../assets/default image.png'),
                },
                {
                name    : '',
                quantity: '',
                price   : '',
                content : '',
                image   : require('../../assets/default image.png'),
                },
            ],
        });

        const handleAdd = () => {
            state.cnt++;
            state.items.push({
                image   : '',
                name    : '',
                price   : '',
                quantity: '',
                content : ''
            })
        }

        const handleSub = () => {
            if(state.cnt >= 3) {     // 1개를 뺐을 때 2 이상이면
                state.cnt--;         // 숫자를 뺌
                state.items.pop();   // 마지막으로 추가했던 항목을 제거
            }
        }
        
        const handleImage = (e, idx) => {
            console.log(e);   // 첨부한 파일의 정보
            console.log(idx); // 파일 위치(배열 순서)

            if(e.target.files[0]){
                // 첨부했다면 state에 이미지 정보를 넣어라
                state.items[idx].image = e.target.files[0];
            }
            else {
                state.items[idx].image = '';
            }
        }

        const handleInsertAction = async() => {

            const url     = `/seller/insert`;
            const headers = { 
                "Content-Type": "multipart/form-data",
                "token"       : state.token                
            };

            const body    = new FormData(); // 이미지가 있는 경우
            for(let i=0; i<state.items.length; i++) {
                body.append("title"   , state.items[i].name);
                body.append("content" , state.items[i].content);
                body.append("price"   , state.items[i].price);
                body.append("quantity", state.items[i].quantity);
                body.append("image"   , state.items[i].image);
            }

            const response = await axios.post(url, body, { headers });
            console.log(response.data);

            if(response.data.status === 200) {
                alert('등록 완료');
                router.push({ name: "Seller" });
            }
        }
        return { state, handleAdd, handleSub, handleImage, handleInsertAction }
    },
}
</script>
<style lang="scss" scoped>
  table {
    width: 100%;
    // border: 1px solid #9e9e9e;
    // border-collapse: collapse;
  }
  th, td {
    // border: 1px solid #a3a3a3;
    padding: 10px;
  }
    @import url(../../assets/mystyle.css);

</style>