ItemUpdateBatch.vue

<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)" />
                        <!-- <button @click="handleRemoveImage()"> 초기화 </button> -->
                    </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");

                // string -> object로 변환
                this.code = JSON.parse(this.code);
                console.log(this.code);

                let arr = []; // [{ code: 1 }, { code: 2 }] => [1, 2, 3]
                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" };
                // [{ code: 1 }, { code: 2 }, { code: 3 }] => [1, 2, 3]
                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) { // items에 tmp['image1'], ['imagedata']를 추가하는 반복문
                        // image1을 키로 해놓으면 원본image가 안뜸. 그래서 image를 image1에다 복사해놓고  
                        // image1을 바꾸고, 취소누르면 image를 가져오는거임 
                        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) { // e = 실제 파일 정보, idx = 위치 정보
                console.log("ItemUpdateBatch => handleImage");
                console.log(e, idx);

                // image      => 수정 전의 이미지
                // imagedata  => 수정하는 이미지 파일(데이터)
                // image1     => 수정하는 이미지 미리보기 URL. 미리보기 이미지용 변수

                if(e.target.files.length > 0) {
                    this.items[idx]['imagedata'] = e.target.files[0]; 
                    this.items[idx]['image1']    = URL.createObjectURL( e.target.files[0] );

                    // image는 바뀌기 전 이미지가 키로 쓰고 있음. 그래서 새로운 키 imagedata를 씀                    
                }
                else { // 첨부하지 않음
                    this.items[idx]['imagedata'] = null;
                    this.items[idx]['image1']    = this.items[idx]['image'];
                }
            }
        }
    }
</script>

<style scoped>

</style>