Initial commit

app/components/parameter/NewCart.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="container is-fluid px-4">
+    <div class="field is-horizontal">
+      <div class="field-body">
+        <!-- Mã giỏ hàng -->
+        <div class="field is-narrow">
+          <label class="label">
+            Mã <span class="has-text-danger">*</span>
+          </label>
+          <div class="control">
+            <input
+              class="input"
+              type="text"
+              placeholder="Nhập mã"
+              v-model="record.code"
+              id="code"
+            />
+          </div>
+        </div>
+
+        <!-- Tên giỏ hàng -->
+        <div class="field">
+          <label class="label">
+            Tên giỏ hàng <span class="has-text-danger">*</span>
+          </label>
+          <div class="control">
+            <input
+              class="input"
+              type="text"
+              placeholder="Nhập tên giỏ hàng"
+              v-model="record.name"
+            />
+          </div>
+        </div>
+
+        <!-- Index -->
+        <div class="field" style="width: 120px;">
+          <label class="label">
+            Index <span class="has-text-danger">*</span>
+          </label>
+          <div class="control">
+            <input
+              class="input"
+              type="number"
+              placeholder="0"
+              v-model.number="record.index"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Đại lý -->
+    <div class="field mt-5">
+      <label class="label">Đại lý</label>
+      <div class="control">
+        <SearchBox
+          v-bind="{
+            api: 'dealer',
+            field: 'code',
+            column: 'code',
+            optionid: record.dealer || null, 
+            first: true,
+            viewaddon: viewAddon,
+            addon: newAddon
+          }"
+          @option="dealerSelected"
+        />
+      </div>
+    </div>
+
+    <!-- Nút lưu -->
+    <div class="field is-grouped is-grouped-right mt-6">
+      <div class="control">
+        <button class="button is-primary has-text-white" @click="update">
+          {{ record.id ? 'Cập nhật' : 'Thêm mới' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+const {
+  $copy,
+  $resetNull,
+  $snackbar,
+  $getdata,
+  $insertapi,
+  $updateapi
+} = useNuxtApp()
+
+// Chỉ nhận id (không nhận row)
+const props = defineProps({
+  prefix: String,
+  id: [Number, String, null] 
+})
+
+const emit = defineEmits(['close', 'modalevent'])
+
+const record = ref({
+  code: '',
+  name: '',
+  index: 0,
+  dealer: null
+})
+
+const viewAddon = {}
+const newAddon = {}
+
+function dealerSelected(obj) {
+  record.value.dealer = obj ? obj.id : null
+}
+
+async function loadCart() {
+  if (!props.id) {
+    record.value = {
+      code: '',
+      name: '',
+      index: 0,
+      dealer: null
+    }
+    return
+  }
+
+  try {
+    const row = await $getdata('cart', { id: props.id }, null, true)
+
+    if (row) {
+      record.value = $copy(row)
+    } else {
+      $snackbar('Không tìm thấy giỏ hàng này')
+      emit('close')
+    }
+  } catch (error) {
+    console.error('Lỗi khi tải dữ liệu giỏ hàng:', error)
+    $snackbar('Lỗi tải dữ liệu')
+    emit('close')
+  }
+}
+
+// Lưu dữ liệu
+async function update() {
+  const data = $resetNull(record.value)
+
+  try {
+    let rs
+    if (data.id) {
+      rs = await $updateapi('cart', data)
+    } else {
+      rs = await $insertapi('cart', data)
+    }
+
+    if (rs === 'error') {
+      $snackbar('Lỗi khi lưu dữ liệu')
+      return
+    }
+
+    $snackbar('Lưu thành công!')
+    emit('modalevent', { name: 'dataevent', data: rs })
+    emit('close')
+  } catch (err) {
+    $snackbar('Có lỗi xảy ra khi lưu')
+    console.error(err)
+  }
+}
+
+// Khởi tạo khi mở modal
+onMounted(async () => {
+  await loadCart()
+  await nextTick()
+  document.getElementById('code')?.focus()
+})
+</script>