Skip to content

Commit

Permalink
Merge pull request #413 from beyond-sw-camp/refactor/input/style
Browse files Browse the repository at this point in the history 
refactor: 견적서, 주문서, 거래 명세서 입력 폼 스타일 변경
  • Loading branch information
@hcbak
hcbak authored Jan 2, 2025
2 parents da32492 + 7771e63 commit 093fd2d
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 133 deletions.
82 changes: 42 additions & 40 deletions SCM/frontend/src/components/invoice/InvoiceInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ function numberThree(number) {
</script>

<template>
<div class="d-flex justify-content-end mt-3">
<div class="col-md-10 d-flex justify-content-end mt-3">
<RouterLink to="/invoice">
<b-button variant="light" size="sm" class="button ms-2">목록</b-button>
</RouterLink>
Expand Down Expand Up @@ -252,51 +252,53 @@ function numberThree(number) {
<hr class="col-md-10 d-flex flex-column">
</div>

<h5 class="px-4">거래 명세서 품목</h5>
<div v-for="invoiceItem in invoiceItemList" class="mx-5 my-3">
<div class="d-flex flex-row border border-secondary rounded p-3 position-relative">
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-bold">{{ invoiceItem.itemName }}</h6>
<div class="col-md-10" style="margin: 0 auto;">
<h5 class="px-4">거래 명세서 품목</h5>
<div v-for="invoiceItem in invoiceItemList" class="mx-5 my-3">
<div class="d-flex flex-row border border-secondary rounded p-3 position-relative">
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-bold">{{ invoiceItem.itemName }}</h6>
</div>
<ul class="d-flex flex-wrap align-items-start">
<li class="mb-3 col-md-6">· 품목명: {{ invoiceItem.itemName }}</li>
<li class="mb-3 col-md-6 d-flex align-items-center">· 품목 단가: ₩ <input type="number"
class="form-control form-control-sm ms-2" style="width: 100px;"
v-model.number="invoiceItem.invoiceItemPrice"
@input="updatePrice(invoiceItem.itemSeq)"
:placeholder="invoiceItem.invoiceItemPrice ? '' : '가격 입력'" :min="1" /></li>
<li class="mb-3 col-md-6 d-flex align-items-center">· 판매 개수:<input type="number"
class="form-control form-control-sm ms-2" style="width: 100px;"
v-model.number="invoiceItem.invoiceItemQuantity"
@input="updatePrice(invoiceItem.itemSeq)"
:placeholder="invoiceItem.invoiceItemQuantity ? '' : '수량 입력'" :min="1" /></li>
<li class="mb-3 col-md-6">· 품목 총 가격: ₩ {{ numberThree(invoiceItem.invoiceItemPrice *
invoiceItem.invoiceItemQuantity) }} </li>
<li class="mb-3 col-md-6 d-flex">· 품목 비고: <b-form-input type="text" size="sm"
v-model="invoiceItem.invoiceItemNote" style="width: auto;" /></li>
</ul>
</div>
<div class="col-md-4 d-flex justify-content-center align-items-center">
<img :src="invoiceItem.itemImageUrl" alt="Item Image"
class="img-fluid border border-secondary rounded" style="max-width: 150px; height: auto;">
</div>
<ul class="d-flex flex-wrap align-items-start">
<li class="mb-3 col-md-6">· 품목명: {{ invoiceItem.itemName }}</li>
<li class="mb-3 col-md-6 d-flex align-items-center">· 품목 단가: ₩ <input type="number"
class="form-control form-control-sm ms-2" style="width: 100px;"
v-model.number="invoiceItem.invoiceItemPrice"
@input="updatePrice(invoiceItem.itemSeq)"
:placeholder="invoiceItem.invoiceItemPrice ? '' : '가격 입력'" :min="1" /></li>
<li class="mb-3 col-md-6 d-flex align-items-center">· 판매 개수:<input type="number"
class="form-control form-control-sm ms-2" style="width: 100px;"
v-model.number="invoiceItem.invoiceItemQuantity"
@input="updatePrice(invoiceItem.itemSeq)"
:placeholder="invoiceItem.invoiceItemQuantity ? '' : '수량 입력'" :min="1" /></li>
<li class="mb-3 col-md-6">· 품목 총 가격: ₩ {{ numberThree(invoiceItem.invoiceItemPrice *
invoiceItem.invoiceItemQuantity) }} </li>
<li class="mb-3 col-md-6 d-flex">· 품목 비고: <b-form-input type="text" size="sm"
v-model="invoiceItem.invoiceItemNote" style="width: auto;" /></li>
</ul>
</div>
<div class="col-md-4 d-flex justify-content-center align-items-center">
<img :src="invoiceItem.itemImageUrl" alt="Item Image"
class="img-fluid border border-secondary rounded" style="max-width: 150px; height: auto;">
</div>

<b-button @click="removeItem(invoiceItem.itemSeq)" variant="light" size="sm"
class="position-absolute btn-close" style="top: 10px; right: 10px;"></b-button>
<b-button @click="removeItem(invoiceItem.itemSeq)" variant="light" size="sm"
class="position-absolute btn-close" style="top: 10px; right: 10px;"></b-button>
</div>
</div>
</div>

<div v-if="calculatePrice != 0" class="line-container mx-5">
<div class="custom-line d-flex justify-content-end">
<h6 class="fw-bold" style="margin-top: 17px; float:right;">총 가격 : ₩ {{ numberThree(calculatePrice) }}
</h6>
</div>
</div> <br>
<div v-if="calculatePrice != 0" class="line-container mx-5">
<div class="custom-line d-flex justify-content-end">
<h6 class="fw-bold" style="margin-top: 17px; float:right;">총 가격 : ₩ {{ numberThree(calculatePrice) }}
</h6>
</div>
</div> <br>

<div class="mx-5 my-3 d-flex justify-content-end">
<b-button @click="createInvoice()" variant="light" size="sm" class="button ms-2">등록</b-button>
<div class="mx-5 my-3 d-flex justify-content-end">
<b-button @click="createInvoice()" variant="light" size="sm" class="button ms-2">등록</b-button>

</div>
</div>
<div class="d-flex justify-content-center">

Expand Down
93 changes: 48 additions & 45 deletions SCM/frontend/src/components/quotation/QuotationInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ function numberThree(number) {
</script>

<template>
<div class="d-flex justify-content-end mt-3">
<div class="col-md-10 d-flex justify-content-end mt-3">
<RouterLink to="/quotation">
<b-button variant="light" size="sm" class="button ms-2">목록</b-button>
</RouterLink>
Expand Down Expand Up @@ -211,57 +211,60 @@ function numberThree(number) {
<hr class="col-md-10 d-flex flex-column">
</div>

<h5 class="px-4">견적서 품목</h5>
<div v-for="quotationItem in quotationItemList" class="mx-5 my-3">
<div class="d-flex flex-row border border-secondary rounded p-3 position-relative">
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-bold">{{ quotationItem.itemName }}</h6>
<div class="col-md-10" style="margin: 0 auto;">
<h5 class="px-4">견적서 품목</h5>

<div v-for="quotationItem in quotationItemList" class="mx-5 my-3">
<div class="d-flex flex-row border border-secondary rounded p-3 position-relative">
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-bold">{{ quotationItem.itemName }}</h6>
</div>
<ul class="d-flex flex-wrap align-items-start">
<li class="mb-3 col-md-6">· 품목명: {{ quotationItem.itemName }}</li>
<li class="mb-3 col-md-6 d-flex align-items-center">· 품목 단가: ₩ <input type="number"
class="form-control form-control-sm ms-2" style="width: 100px;"
v-model.number="quotationItem.quotationItemPrice"
@input="updatePrice(quotationItem.itemSeq)"
:placeholder="quotationItem.quotationItemPrice ? '' : '가격 입력'" :min="1" /></li>
<li class="mb-3 col-md-6 d-flex align-items-center">· 주문 개수:<input type="number"
class="form-control form-control-sm ms-2" style="width: 100px;"
v-model.number="quotationItem.quotationItemQuantity"
@input="updatePrice(quotationItem.itemSeq)"
:placeholder="quotationItem.quotationItemQuantity ? '' : '수량 입력'" :min="1" /></li>
<li class="mb-3 col-md-6">· 품목 총 가격: ₩ {{ numberThree(quotationItem.quotationItemPrice * quotationItem.quotationItemQuantity) }} </li>
<li class="mb-3 col-md-6 d-flex">· 품목 비고: <b-form-input type="text" size="sm" v-model="quotationItem.quotationItemNote" style="width: auto;"/></li>
</ul>
</div>
<div class="col-md-4 d-flex justify-content-center align-items-center">
<img :src="quotationItem.itemImageUrl" alt="Item Image"
class="img-fluid border border-secondary rounded" style="max-width: 150px; height: auto;">
</div>
<ul class="d-flex flex-wrap align-items-start">
<li class="mb-3 col-md-6">· 품목명: {{ quotationItem.itemName }}</li>
<li class="mb-3 col-md-6 d-flex align-items-center">· 품목 단가: ₩ <input type="number"
class="form-control form-control-sm ms-2" style="width: 100px;"
v-model.number="quotationItem.quotationItemPrice"
@input="updatePrice(quotationItem.itemSeq)"
:placeholder="quotationItem.quotationItemPrice ? '' : '가격 입력'" :min="1" /></li>
<li class="mb-3 col-md-6 d-flex align-items-center">· 주문 개수:<input type="number"
class="form-control form-control-sm ms-2" style="width: 100px;"
v-model.number="quotationItem.quotationItemQuantity"
@input="updatePrice(quotationItem.itemSeq)"
:placeholder="quotationItem.quotationItemQuantity ? '' : '수량 입력'" :min="1" /></li>
<li class="mb-3 col-md-6">· 품목 총 가격: ₩ {{ numberThree(quotationItem.quotationItemPrice * quotationItem.quotationItemQuantity) }} </li>
<li class="mb-3 col-md-6 d-flex">· 품목 비고: <b-form-input type="text" size="sm" v-model="quotationItem.quotationItemNote" style="width: auto;"/></li>
</ul>
</div>
<div class="col-md-4 d-flex justify-content-center align-items-center">
<img :src="quotationItem.itemImageUrl" alt="Item Image"
class="img-fluid border border-secondary rounded" style="max-width: 150px; height: auto;">
</div>

<b-button @click="removeItem(quotationItem.itemSeq)" variant="light" size="sm"
class="position-absolute btn-close" style="top: 10px; right: 10px;"></b-button>
<b-button @click="removeItem(quotationItem.itemSeq)" variant="light" size="sm"
class="position-absolute btn-close" style="top: 10px; right: 10px;"></b-button>
</div>
</div>
</div>

<div v-if="calculatePrice != 0" class="line-container mx-5">
<div class="custom-line d-flex justify-content-end">
<h6 class="fw-bold" style="margin-top: 17px; float:right;">총 가격 : ₩ {{ numberThree(calculatePrice) }}
</h6>
</div>
</div> <br />
<div v-if="calculatePrice != 0" class="line-container mx-5">
<div class="custom-line d-flex justify-content-end">
<h6 class="fw-bold" style="margin-top: 17px; float:right;">총 가격 : ₩ {{ numberThree(calculatePrice) }}
</h6>
</div>
</div> <br />

<span data-bs-toggle="modal" data-bs-target="#openItemModal">
<b-input-group-text
class="mx-5 my-3 d-flex justify-content-center align-items-center border border-secondary rounded p-3"
style="cursor: pointer;" @click="fetchItemList()">
<plusIcon class="icon" />
</b-input-group-text>
</span>
<span data-bs-toggle="modal" data-bs-target="#openItemModal">
<b-input-group-text
class="mx-5 my-3 d-flex justify-content-center align-items-center border border-secondary rounded p-3"
style="cursor: pointer;" @click="fetchItemList()">
<plusIcon class="icon" />
</b-input-group-text>
</span>

<div class="mx-5 my-3 d-flex justify-content-end">
<b-button @click="createQuotation()" variant="light" size="sm" class="button ms-2">등록</b-button>
<div class="mx-5 my-3 d-flex justify-content-end">
<b-button @click="createQuotation()" variant="light" size="sm" class="button ms-2">등록</b-button>

</div>
</div>
<div class="d-flex justify-content-center">

Expand Down
Loading

0 comments on commit 093fd2d

Please sign in to comment.