청약 취소 수동 버튼

frontend/src/modules/custMgt/components/commonModal.vue

@@ -16,7 +16,8 @@
           <p v-if="msg4 !== ''">{{ msg4 }}</p>
         </div>
         <div class="popup-btn1">
-          <button class="btn-pcolor" @click="alertModalClose();">확인</button>
+          <button class="btn-pcolor" v-if="title=='청약상태취소'" @click="alertModalClose2();">확인</button>
+          <button class="btn-pcolor" v-else @click="alertModalClose();">확인</button>
         </div>
       </div>
     </div>
@@ -96,6 +97,7 @@ export default {
       msg2: '',
       msg3: '',
       msg4: '',
+      serviceId: '',
       targetFocus: '',
     }
   },
@@ -106,6 +108,7 @@ export default {
       this.msg2 = props.msg2;
       this.msg3 = props.msg3;
       this.msg4 = props.msg4;
+      this.serviceId = props.serviceId;
       var dimmed = document.getElementsByClassName('alertModal');
       for (var i = 0; i < dimmed.length; i++) {
         dimmed[i].style.display = 'block';
@@ -119,6 +122,13 @@ export default {
       }
       this.$parent.checkFocus();
     },
+    alertModalClose2(){
+      var dimmed = document.getElementsByClassName('alertModal');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+      this.$parent.subsDetail(this.serviceId);
+    },
     alertModalCancel() {
       var dimmed = document.getElementsByClassName('alertModal');
       for (var i = 0; i < dimmed.length; i++) {

frontend/src/modules/custMgt/service/custMgtApi.js

@@ -117,6 +117,10 @@ const userList = (params) => {
     return httpClient.post('/api/v1/bo/custMgt/userList', params);
 }
 
+// 유저 ID 조회
+const cancleSubsSttus = (params) => {
+    return httpClient.post('/api/v1/bo/custMgt/cancleSubsSttus', params);
+}
 
 const getExcelHeader = category => {
     // 엑셀에 출력할 Header 정보를 Mockup 데이터로 관리한다.
@@ -165,4 +169,5 @@ export default {
     chrgDetail,
     deleteChrg,
     userList,
+    cancleSubsSttus,
 }

frontend/src/modules/custMgt/views/SubsDetail.vue

@@ -80,7 +80,10 @@
               <td colspan="5"><input type="text" disabled v-model="subsDt" /></td>
               <th>상태</th>
               <td colspan="5">
-                <input type="text" disabled v-model="stat" />
+                <div class="input-double">
+                  <input type="text" disabled v-model="stat" />
+                  <button v-if="(this.subsSttusCd=='01')||(this.subsSttusCd=='00')" type="button" class="button grey btn-a" @click="cancleSubsStatus">청약취소</button>
+                </div>
               </td>
             </tr>
             <tr class="tr_input w75">
@@ -214,6 +217,7 @@ export default {
       subsDt: '',
       stat: '',
       plan: '',
+      prodCd: '',
       subsNo: '',
       adminId: '',
       adminNm: '',
@@ -229,6 +233,8 @@ export default {
       saveConfirm: false,
       props: {},
       bindDcYn: '',
+      subsSttusCd: '',
+      subsId : '',
     };
   },
   props: {
@@ -285,7 +291,6 @@ export default {
       this.row.endDt = '';
       this.row.page = 1;
       this.row.serviceId = this.$route.params.serviceId;
-      console.log(this.row);
       this.$router.push({ name: 'subsList', params: this.row });
     },
     async subsDetail(serviceId) {
@@ -306,8 +311,11 @@ export default {
           this.cprRegNo = result.data.cprRegNo;
           this.birth = result.data.birth;
           this.subsDt = result.data.subsDt;
+          this.subsSttusCd = result.data.subsSttusCd;
+          this.subsId = result.data.subsId;
           this.stat = result.data.stat;
           this.plan = result.data.plan;
+          this.prodCd = result.data.prodCd;
           this.subsNo = result.data.subsNo;
           this.adminId = result.data.adminId;
           this.adminNm = result.data.adminNm;
@@ -414,6 +422,33 @@ export default {
         return String.fromCharCode(s.match(/\d+/gm)[0]);
       });
     },
+
+    async cancleSubsStatus(){
+      let param = {
+        userId : this.serviceId,
+        subsId : this.subsId,
+        adminId : this.adminId,
+        prodCd : this.prodCd,
+      }
+      try {
+        const response = await custMgtApi.cancleSubsSttus(param);
+        const result = response.data;
+        if (result != null && result.retCode == '0000') {
+          this.row.title = '청약상태취소';
+          this.row.msg1 = '청약상태를 취소 하였습니다.';
+          this.serviceId = this.serviceId;
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        } else {
+          this.row.title = '청약상태취소';
+          this.row.msg1 = '청약 상태 취소에 실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        }
+      } catch (error) {
+        this.row.title = '청약상태취소';
+        this.row.msg1 = '청약 상태 취소에 실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+      }
+    }
   },
 };
 </script>