-จัดการ flow ของ program ใหม่

2025-11-19 11:08:30 +07:00
parent 6da86b74a9
commit 213fd197ef
46 changed files with 1684 additions and 29 deletions
--- a/ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.css
+++ b/ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.css
--- a/ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.html
+++ b/ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.html
@@ -0,0 +1,197 @@
+<div class="p-6">
+
+  <!-- Header -->
+  <div class="flex justify-between items-center mb-4">
+    <h2 class="text-xl font-semibold">
+      รายการงบประมาณของโครงการ: {{ project?.name }}
+    </h2>
+
+    <div class="text-gray-600 text-sm">
+      แสดงข้อมูล {{ budgetItems.length }} รายการ
+    </div>
+  </div>
+
+
+  <!-- Add New Budget Item -->
+  <form [formGroup]="addItemForm" class="bg-gray-50 border rounded-xl p-4 mb-6">
+
+    <h3 class="font-semibold mb-3 text-gray-700">เพิ่มรายการงบประมาณ</h3>
+
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+
+      <!-- หมวดงบ -->
+      <div>
+        <label class="text-sm text-gray-600">หมวดงบประมาณ</label>
+        <select
+          formControlName="category"
+          class="w-full px-4 py-2 border rounded-xl bg-white mt-1
+                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
+        >
+          <option value="">-- เลือกหมวดงบ --</option>
+
+          @for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
+            <option [value]="item.dtlcod">{{ item.dtlnam }}</option>
+          }
+        </select>
+
+        <!-- error -->
+        <div
+          *ngIf="addItemForm.controls['category'].invalid && addItemForm.controls['category'].touched"
+          class="text-red-500 text-xs mt-1"
+        >
+          กรุณาเลือกหมวดงบ
+        </div>
+      </div>
+
+      <!-- รายการ -->
+      <div>
+        <!-- <label class="text-sm text-gray-600">ชื่อรายการ</label>
+        <select
+          formControlName="name"
+          class="w-full px-4 py-2 border rounded-xl bg-white mt-1
+                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
+        >
+          <option value="">-- เลือกรายการ --</option>
+
+          <option *ngFor="let it of masterItems" [value]="it.name">
+            {{ it.name }}
+          </option>
+        </select> -->
+
+        <div
+          *ngIf="addItemForm.controls['name'].invalid && addItemForm.controls['name'].touched"
+          class="text-red-500 text-xs mt-1"
+        >
+          กรุณาเลือกรายการ
+        </div>
+      </div>
+
+      <!-- จำนวน -->
+      <div>
+        <label class="text-sm text-gray-600">จำนวน</label>
+        <input
+          type="number"
+          formControlName="qty"
+          class="w-full px-4 py-2 border rounded-xl bg-white mt-1
+                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
+        />
+
+        <div
+          *ngIf="addItemForm.controls['qty'].invalid && addItemForm.controls['qty'].touched"
+          class="text-red-500 text-xs mt-1"
+        >
+          จำนวนต้องมากกว่า 0
+        </div>
+      </div>
+
+      <!-- ราคา -->
+      <div>
+        <label class="text-sm text-gray-600">ราคา</label>
+        <input
+          type="number"
+          formControlName="price"
+          class="w-full px-4 py-2 border rounded-xl bg-white mt-1
+                 focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
+        />
+
+        <div
+          *ngIf="addItemForm.controls['price'].invalid && addItemForm.controls['price'].touched"
+          class="text-red-500 text-xs mt-1"
+        >
+          ราคาต้องมากกว่า 0
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Add button -->
+    <button
+      type="button"
+      (click)="addBudgetItem()"
+      class="mt-4 bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-xl shadow"
+    >
+      ➕ เพิ่มเข้าตาราง
+    </button>
+
+  </form>
+
+
+
+  <!-- Table -->
+  <div class="overflow-x-auto bg-white shadow rounded-xl border">
+    <table class="min-w-full border-collapse text-sm">
+
+      <thead class="bg-gray-100 border-b">
+        <tr class="text-gray-700">
+          <th class="py-3 px-4">ลำดับ</th>
+          <th class="py-3 px-4">สถานะ</th>
+          <th class="py-3 px-4">รหัส</th>
+          <th class="py-3 px-4">ชื่อรายการ</th>
+          <th class="py-3 px-4 text-center">จำนวน</th>
+          <th class="py-3 px-4 text-right">ราคา/หน่วย</th>
+          <th class="py-3 px-4 text-right">ยอดชำระ</th>
+          <th class="py-3 px-4 text-center">ดำเนินการ</th>
+        </tr>
+      </thead>
+
+      <tbody>
+
+        <tr
+          *ngFor="let item of budgetItems; let i = index"
+          class="border-b hover:bg-gray-50 transition"
+        >
+          <td class="py-3 px-4">{{ i + 1 }}</td>
+
+          <td class="py-3 px-4 text-center">
+            <span class="text-green-500 text-xl">●</span>
+          </td>
+
+          <td class="py-3 px-4 font-medium">{{ item.code }}</td>
+
+          <td class="py-3 px-4 font-semibold">{{ item.name }}</td>
+
+          <td class="py-3 px-4 text-center">
+            <input
+              type="number"
+              class="w-20 px-3 py-2 border rounded-lg text-center"
+            />
+          </td>
+
+          <td class="py-3 px-4 text-right">
+            {{ item.price | number:'1.0-2' }}
+          </td>
+
+          <td class="py-3 px-4 text-right font-semibold">
+            {{ item.qty * item.price | number:'1.0-2' }}
+          </td>
+
+          <td class="py-3 px-4 text-center space-x-2">
+            <button
+              class="bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg shadow"
+            >
+              🗑
+            </button>
+
+            <button
+              class="bg-gray-600 hover:bg-gray-700 text-white px-3 py-2 rounded-lg shadow"
+            >
+              👁
+            </button>
+          </td>
+        </tr>
+
+      </tbody>
+
+    </table>
+  </div>
+
+
+  <!-- Summary -->
+  <div class="text-right mt-4 text-lg font-semibold">
+    ยอดรวมทั้งหมด:
+    <span class="text-blue-600">
+      {{ getTotalAmount() | number:'1.0-2' }} บาท
+    </span>
+  </div>
+
+</div>
--- a/ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.ts
+++ b/ng-ttc-frontend/src/app/component/budget-aproval/budget-aproval.ts
@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { GeneralService } from '../../services/generalservice';
+import { IDropAct, IStateDrop, IStateResultResponse, IActData, IActSumData } from '../../interfaces/dashboard.interface'
+import { DashboardStateService } from '../../services/state/dashboard-state.service';
+import { Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-budget-aproval',
+  standalone: false,
+  templateUrl: './budget-aproval.html',
+  styleUrl: './budget-aproval.css',
+})
+export class BudgetAproval {
+  projectCode: any;
+  project: any;
+  addItemForm!: FormGroup;
+
+  budgetItems = [
+    { code: 'ITEM001', name: 'เอกซ์เรย์', qty: 1, price: 1000 },
+    { code: 'ITEM002', name: 'กรอกคำสั่งซื้อ', qty: 1, price: 1500 },
+    { code: 'ITEM003', name: 'ตรวจพื้นฐาน', qty: 1, price: 1000 },
+  ];
+
+  budgetCategoriesDrop = {
+  expense: [
+    { dtlcod: 'BDG001', dtlnam: 'เงินรายได้' },
+    { dtlcod: 'BDG002', dtlnam: 'งบดำเนินงาน ปวส.' },
+    { dtlcod: 'BDG003', dtlnam: 'โครงการส่งเสริมพัฒนาทักษะวิชาชีพทักษะพื้นฐาน' },
+    { dtlcod: 'BDG004', dtlnam: 'ค่ากิจกรรมพัฒนาคุณภาพผู้เรียน' },
+    { dtlcod: 'BDG005', dtlnam: 'อุดหนุนส่งเสริมและพัฒนาผู้เรียนองค์การวิชาชีพแห่งประเทศไทย (อวท.)' },
+    { dtlcod: 'BDG006', dtlnam: 'งบดำเนินงาน ระยะสั้น' },
+    { dtlcod: 'BDG007', dtlnam: 'โครงการบูรณาการการพัฒนาทักษะทางวิชาชีพกับการเสริมสร้างคุณลักษณะอันพึงประสงค์ (FIX IT)' },
+    { dtlcod: 'BDG008', dtlnam: 'โครงการพัฒนาทักษะและสมรรถนะวิชาชีพกำลังคน (Up-skill, Re-skill)' },
+    { dtlcod: 'BDG009', dtlnam: 'งบดำเนินงาน ปวช.' },
+    { dtlcod: 'BDG010', dtlnam: 'โครงการขยายและยกระดับการจัดอาชีวศึกษาระบบทวิภาคีคุณภาพสูง' },
+    { dtlcod: 'BDG011', dtlnam: 'ปวช.(สอจ)' },
+    { dtlcod: 'BDG012', dtlnam: 'ค่าจัดการเรียนการสอน' },
+    { dtlcod: 'BDG013', dtlnam: 'งบดำเนินงาน 170000' },
+    { dtlcod: 'BDG014', dtlnam: 'โครงการพัฒนาทักษะและศักยภาพภาพการจัดการเรียนการสอนอาชีวศึกษา' },
+    { dtlcod: 'BDG015', dtlnam: 'ศึกษาธิการ' },
+    { dtlcod: 'BDG016', dtlnam: 'Up-skill' },
+    { dtlcod: 'BDG017', dtlnam: 'ติดตามผู้สำเร็จ' },
+    { dtlcod: 'BDG018', dtlnam: 'ทวิภาคี' },
+    { dtlcod: 'BDG019', dtlnam: 'พันธุกรรม' },
+    { dtlcod: 'BDG020', dtlnam: 'ปวส(สาธารณูประโภค)' },
+    { dtlcod: 'BDG021', dtlnam: 'ปวส(ค่าสาธารณูปโภค)' },
+    { dtlcod: 'BDG022', dtlnam: 'งบดำเนินงาน (ค่าสาธารณูปโภค)' },
+    { dtlcod: 'BDG023', dtlnam: 'ค่าหนังสือเรียน' },
+    { dtlcod: 'BDG024', dtlnam: 'โครงการอาชีวะต้านยาเสพติด' },
+    { dtlcod: 'BDG025', dtlnam: 'ค่าตอบแทนพนักงานราชการ' },
+    { dtlcod: 'BDG026', dtlnam: 'ค่าอุปกรณ์การเรียน' },
+    { dtlcod: 'BDG027', dtlnam: 'โครงการยกระดับและพัฒนาขีดความสามารถด้านภาษาและทักษะดิจิทัลเพื่อพัฒนากำลังคนให้มีสมรรถนะสูง' },
+    { dtlcod: 'BDG028', dtlnam: 'โครงการอนุรักษ์พันธุกรรมพืชอันเนื่องมาจากพระราชดำริ' },
+    { dtlcod: 'BDG029', dtlnam: 'ปวช.(สอจ.)' },
+    { dtlcod: 'BDG030', dtlnam: 'โครงการพัฒนาศักยภาพผู้เรียนอาชีวศึกษาในการเป็นผู้ประกอบการ (บ่มเพาะ)' },
+    { dtlcod: 'BDG031', dtlnam: 'โครงการพัฒนาและยกระดับการติดตามผู้สำเร็จการศึกษาอาชีวศึกษา' },
+    { dtlcod: 'BDG032', dtlnam: 'โครงการเสริมสร้างคุณธรรม จริยธรรมและธรรมาภิบาลในสถานศึกษา' },
+    { dtlcod: 'BDG033', dtlnam: 'โครงการจัดการอาชีวศึกษาเพื่อสนองพระราชดำริ' },
+    { dtlcod: 'BDG034', dtlnam: 'เงินรายได้ ป.ตรี' },
+    { dtlcod: 'BDG035', dtlnam: 'งบดำเนินงาน 235200' }
+  ]
+};
+
+
+ngOnInit(): void {
+  this.setupForm();
+}
+
+setupForm() {
+  this.addItemForm = new FormGroup({
+    category: new FormControl('', [Validators.required]),
+    name: new FormControl('', [Validators.required]),
+    qty: new FormControl(1, [Validators.required, Validators.min(1)]),
+    price: new FormControl(0, [Validators.required, Validators.min(1)])
+  });
+}
+
+addBudgetItem() {
+  if (this.addItemForm.invalid) {
+    this.addItemForm.markAllAsTouched();
+    return;
+  }
+
+  const formValue = this.addItemForm.value;
+
+  this.budgetItems.push({
+    code: 'NEW' + (this.budgetItems.length + 1).toString().padStart(3, '0'),
+    name: formValue.name,
+    qty: formValue.qty,
+    price: formValue.price,
+    // category: formValue.category
+  });
+
+  // reset form
+  this.addItemForm.reset({
+    category: '',
+    name: '',
+    qty: 1,
+    price: 0
+  });
+}
+
+getTotalAmount() {
+  return this.budgetItems.reduce((sum, item) => sum + item.qty * item.price, 0);
+}
+
+}