F_ORDER_01 - order

vue-light-bootstrap-dashboard-master/.gitattributes

@@ -0,0 +1,2 @@
+/src/layout/DashboardLayout.vue merge=servers
+/src/routes/routes.js merge=servers

vue-light-bootstrap-dashboard-master/package.json

@@ -13,6 +13,7 @@
     "lint-fix": "vue-cli-service lint --fix"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "bootstrap": "4.6.0",
     "cache-loader": "^4.1.0",
     "chartist": "0.11.0",

vue-light-bootstrap-dashboard-master/src/components/InputTable.vue

@@ -0,0 +1,106 @@
+<template>
+  <table class="table">
+    <thead>
+      <tr>
+        <th v-for="column in columns" :key="column">{{ column }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(item, index) in filteredAndVisibleData" :key="index">
+        <td v-for="column in columns" :key="column">
+          <template v-if="column === '주문 수량'">
+            <!-- 입력 필드인 경우 input 태그를 렌더링합니다. -->
+            <input type="number" v-model="item[column]" @input="updateAmount(item)" />
+          </template>
+          <template v-else>
+            <!-- 그 외의 경우는 일반 텍스트를 렌더링합니다. -->
+            {{ item[column] }}
+          </template>
+        </td>
+        <td>
+          <!-- "+" 버튼은 행이 비활성화 상태일 때만 표시 -->
+          <button class="btn btn-info btn-fill" v-if="!item.visible" @click="handleAddRowClick(item)">+</button>
+          <!-- "-" 버튼은 행이 활성화(고정) 상태일 때만 표시 -->
+          <button class="btn btn-warning btn-fill" v-else @click="handleRemoveRowClick(item)">-</button>
+        </td>
+      </tr>
+      <tr>
+        <td :colspan="columns.length - 1">Total Amount</td>
+        <td>{{ totalAmount }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'l-table',
+  props: {
+    columns: Array,
+    data: Array,
+    searchQuery: String,
+  },
+  computed: {
+    filteredAndVisibleData() {
+      const searchLower = this.searchQuery.toLowerCase();
+
+      return this.data.filter(item => 
+        item.visible || item['상품명'].toLowerCase().includes(searchLower)
+      );
+    },
+    filteredData() {
+      return this.data.filter(item => 
+        item.visible || item['상품명'].toLowerCase().includes(this.searchQuery.toLowerCase())
+      );
+    },
+    visibleData() {
+      return this.data.filter(item => item.visible || item['상품명'].toLowerCase().includes(this.searchQuery.toLowerCase()));
+    },
+    totalAmount() {
+      return this.data.reduce((acc, item) => acc + (item['가격(BOX)'] * item['주문 수량']), 0);
+    }
+  },
+  watch: {
+    // 'data' 배열의 각 항목을 감시합니다. deep: true 옵션으로 객체 내부까지 감시합니다.
+    'data': {
+      handler: function (newData) {
+        newData.forEach((item) => {
+          if (item['주문 수량'] < 0) {
+            item['주문 수량'] = 0; // 값이 0보다 작으면 0으로 설정
+          } else if (item['주문 수량'] > item['주문 가능 수량']) {
+            item['주문 수량'] = item['주문 가능 수량']; // 입력 값이 주문 가능 수량을 초과하면 주문 가능 수량으로 설정
+          }
+          item['금액(원)'] = item['가격(BOX)'] * item['주문 수량'];
+        });
+      },
+      deep: true,
+      immediate: true // 컴포넌트가 마운트될 때 감시자가 즉시 실행되도록 설정
+    }
+  },
+  methods: {
+    updateAmount(item) {
+      // 입력 필드 값에 따라 금액 계산
+      item['금액(원)'] = item['가격(BOX)'] * item['주문 수량'];
+
+      // 계산된 총합을 상위 컴포넌트로 전달
+      this.$emit('update-total', this.data.reduce((total, currentItem) => total + currentItem['금액(원)'], 0));
+    },
+    handleAddRowClick(item) {
+      if (item['주문 수량'] <= 0) {
+        // If the order quantity is 0 or less, show an alert and don't emit the add-row event
+        window.alert("주문 수량이 0입니다. 다시 입력해 주세요.");
+        return; // Stop the method here
+      }
+      // If the order quantity is greater than 0, make the row permanently visible
+      this.$emit('add-row', item['상품 코드']);
+    },
+    handleRemoveRowClick(item) {
+      // 수량을 0으로 설정하고, 행을 비활성화
+      item['주문 수량'] = 0;
+      item.visible = false;
+      // 금액을 업데이트하고, 총합을 재계산하여 상위 컴포넌트에 전달
+      this.updateAmount(item);
+    }
+  }
+};
+</script>

vue-light-bootstrap-dashboard-master/src/components/OrderBaseDropdown.vue

@@ -0,0 +1,68 @@
+<template>
+  <li class="dropdown nav-item"
+      :is="tag"
+      :class="{show: isOpen}"
+      aria-haspopup="true"
+      :aria-expanded="isOpen"
+      @click="toggleDropDown"
+      v-click-outside="closeDropDown">
+
+    <a class="nav-link dropdown-toggle"
+       data-toggle="dropdown">
+      <slot name="title">
+        <i :class="icon"></i>
+        <span class="no-icon">{{title}}</span>
+        <b class="caret"></b>
+      </slot>
+    </a>
+    <div class="dropdown-menu show" v-show="isOpen">
+      <slot></slot>
+      <a class="dropdown-item" href="#" v-for="item in items" :key="item" @click.prevent="itemSelected(item)">
+        {{ item }}
+      </a>
+    </div>
+  </li>
+</template>
+<script>
+export default {
+  name: 'base-dropdown',
+  props: {
+    icon: String,
+    tag: {
+      type: String,
+      default: 'li'
+    },
+    items: Array // 드롭다운에 표시할 항목들
+  },
+  data() {
+    return {
+      isOpen: false,
+      title: this.initialTitle, // 초기 타이틀 설정
+    }
+  },
+  methods: {
+    itemSelected(item) {
+  this.title = item; // 타이틀 업데이트
+  this.closeDropDown(); // 드롭다운 닫기
+  this.$emit('item-selected', item); // 부모 컴포넌트로 선택된 항목 알리기
+},
+    toggleDropDown() {
+      this.isOpen = !this.isOpen
+      this.$emit('change', this.isOpen)
+    },
+    closeDropDown() {
+      this.isOpen = false
+      this.$emit('change', this.isOpen)
+    }
+  }
+}
+</script>
+<style scoped>
+.dropdown .dropdown-toggle {
+  cursor: pointer;
+}
+
+li {
+  list-style-type: none;
+}
+</style>

vue-light-bootstrap-dashboard-master/src/components/Table.vue

@@ -3,35 +3,40 @@
     <thead>
       <slot name="columns">
         <tr>
-          <th v-for="column in columns" :key="column">{{column}}</th>
+          <th v-for="column in columns" :key="column">{{ column }}</th>
         </tr>
       </slot>
     </thead>
     <tbody>
-    <tr v-for="(item, index) in data" :key="index">
-      <slot :row="item">
-        <td v-for="column in columns" :key="column" v-if="hasValue(item, column)">{{itemValue(item, column)}}</td>
-      </slot>
-    </tr>
+      <tr v-for="(item, index) in data" :key="index" @click="handleRowClick(item)">
+        <slot :row="item">
+          <td v-for="column in columns" :key="column" v-if="hasValue(item, column)">{{ itemValue(item, column) }}</td>
+        </slot>
+      </tr>
     </tbody>
   </table>
 </template>
+
 <script>
-  export default {
-    name: 'l-table',
-    props: {
-      columns: Array,
-      data: Array
+export default {
+  name: 'l-table',
+  props: {
+    columns: Array,
+    data: Array
+  },
+  methods: {
+    hasValue(item, column) {
+      return item[column.toLowerCase()] !== 'undefined';
+    },
+    itemValue(item, column) {
+      return item[column.toLowerCase()];
     },
-    methods: {
-      hasValue (item, column) {
-        return item[column.toLowerCase()] !== 'undefined'
-      },
-      itemValue (item, column) {
-        return item[column.toLowerCase()]
-      }
+    handleRowClick(item) {
+      this.$emit('row-click', item); // Emitting the row-click event with the clicked item as payload
     }
   }
+};
 </script>
+
 <style>
-</style>
+</style>