ItemUpdateBatch.vue

김형우·2022년 1월 4일
0

vue.js

목록 보기
26/30

항목 일괄 수정 - PUT

1. intut text 타입으로 table 만들기

  • 각 테이블 컬럼에 scope 값을 줘서 $index와 함께 사용
    : 항목의 순서로 각 아이템의 위치를 파악
    : 가져오는 전체 항목을 :data="items" 안에 다 넣어서 가져옴
    : this.items = response.data.result;
    : 각 항목을 scope$index를 사용하여 테이블에 넣는다.
<template>
    <div>
        <h3>ItemUpdateBatch.vue</h3>
        <hr>
        {{this.items}}

        <hr>

        <el-table :data="items" style="width: 100%" >

            <el-table-column label="번호" width="50">
                <template #default="scope">
                    {{scope.$index}}                                        
                </template>
            </el-table-column>

            <el-table-column label="물품명" >
                <template #default="scope">
                    {{scope.$index}}
                    <el-input v-model="items[scope.$index].name" 
                    		placeholder="물품명"></el-input>
                    <!-- 이렇게 쓰라고 정의 되어 있음. -->
                </template>
            </el-table-column>

            <el-table-column label="물품내용">
                <template #default="scope">
                    {{scope.$index}}
                    <el-input v-model="items[scope.$index].content" 
                    		placeholder="물품내용"></el-input>                    
                </template>
            </el-table-column>

            <el-table-column label="가격">
                <template #default="scope">
                    {{scope.$index}}
                    <el-input v-model="items[scope.$index].price" 
                    		placeholder="가격"></el-input>                    
                </template>
            </el-table-column>

            <el-table-column label="수량">
                <template #default="scope">
                    {{scope.$index}}
                    <el-input v-model="items[scope.$index].quantity" 
                    placeholder="수량"></el-input>                    
                </template>
            </el-table-column>

            <el-table-column label="이미지">
                <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-form :inline="true" >
            <el-form-item >
                <el-button @click="handleUpdateBatch" 
                		type="primary">물품일괄수정</el-button>
            </el-form-item>            
        </el-form>
    </div>
</template>

<script>
    export default {
        
        mounted(){
            // 새로고침 처리
            // console.log(this.code);
            if(typeof this.code ==='undefined'){
                this.$router.back();
            }
            else{
                this.handleData();
            }
        },
        data(){
            return{                
                code : this.$route.params.code,
                items : [],
            }
        },
        methods : {
            handleImage(e, idx){
                console.log("ItemUpdateBatch.vue => handleImage");
                console.log(e, idx); 
                // e   : 실제파일 정보 
                // idx : 실제파일 위치정보
                // e.target.files 여기에 이미지가 첨부되어있음
                // this.items[idx].image = e.target.files[0];
                // 파일 선택할때마다 items의 image값이 [object File]로 바뀜
                // this.items[idx].imageurl = URL.createObjectURL(e.target.files[0]);
                

                // image : 수정전의 이미지
                // imagedata : 수정하는 이미지파일 (데이터)
                // image1 : 수정하는 이미지 미리보기 URL (미리보기로 써야 될 변수명)
                // 가장 먼저 할 일은 image를 image1에 카피 해야함.
                // image는 백업용

                if(e.target.files.length > 0 ) { //0보다 크다는 말은 일단 파일은 첨부되어있다는 뜻
                    this.items[idx].imagedata = e.target.files[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']
                   // 수정이기떄문에 default 이미지를 안쓰고 기존이미지를 보이게 한다. 
                   // 취소하면 원래 원본이미지가 여기로 온다.
                }
                // console.log(this.items.imageurl);
            },
            async handleUpdateBatch(){
                console.log("ItemInsertBatch.vue => handleUpdateBatch");
                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'})
                    // console.log(response);

                }
            },
            async handleData(){                
                // console.log('ItemUpdateBatch.vue => handleData');
                // string을 다시 array로 바꿈
                this.code = JSON.parse(this.code);
                                
                
                // [{code:1},{code:2},{code:3}]  => [1,2,3]

                // 이렇게 넘어왔다. (tmp._id)
                // code : this.$route.params.code,
                // [
                //     {
                //         "code": 10028
                //     },
                //     {
                //         "code": 10027
                //     }
                // ]

                let arr = [];   // [{code:1},{code:2}] => [1,2]           
                for(let tmp of this.code){
                    // console.log('ItemUpdateBatch => tmp.code', tmp.code);
                    arr.push(tmp.code)
                }

                // console.log('ItemUpdateBatch => arr', arr);

                const url = `/item/selectcheck`;
                const headers = {"Content-Type":"application/json"};
                const body = {chks:arr}; //{"chks" : [10032, 10038, 10039]}
                const response = await this.axios.post(
                    url,
                    body,                    
                    {headers : headers} 
                ); 
                             
                console.log(response.data.result);
                if(response.data.status === 200){
                    this.items = response.data.result;
                    // 이 시점에 image1은 없음
                    // 데이터를 받은 시점에 아래와같이 데이터를 미리 세팅하는 작업이 더 효율적이다


                    // 미리보기를 위한 image1 key 추가(복사)
                    // 이거 중요!
                    for(let tmp of this.items){
                        tmp['image1'] = tmp['image']
                    }
                    
                }
                
            }
        }
    }
</script>

<style scoped>

</style>
profile
The best

0개의 댓글