Commit d970b293 by Natthaphat Pankiang

หน้าจอ ทะเบียนบริษัท > สาขาและหน่วยธุรกิจ >ทะเบียนส่วน กับ ส่วนย่อย2 และ ส่วนย่อย4

parent 51774a1e
......@@ -21,19 +21,19 @@
<app-department-list></app-department-list>
</div>
<div *ngIf="activeTab === 'tab3'" class="tab-pane">
<app-section-registration></app-section-registration>
</div>
<div *ngIf="activeTab === 'tab4'" class="tab-pane">
<app-sub-department-one></app-sub-department-one>
</div>
<div *ngIf="activeTab === 'tab5'" class="tab-pane">
<app-sub-department-two></app-sub-department-two>
</div>
<div *ngIf="activeTab === 'tab6'" class="tab-pane">
<app-sub-department-three></app-sub-department-three>
</div>
<div *ngIf="activeTab === 'tab7'" class="tab-pane">
<app-sub-department-four></app-sub-department-four>
</div>
</div>
</div>
\ No newline at end of file
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 3.5px solid #569bf5;
}
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-section-registration',
templateUrl: './section-registration.component.html',
styleUrls: ['./section-registration.component.scss']
})
export class SectionRegistrationComponent {
pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'ทะเบียนบริษัท']
activeTab: string = 'tab1';
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', tab.text]
this.activeTab = tab.id
}
}
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 3.5px solid #569bf5;
}
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-sub-department-four',
templateUrl: './sub-department-four.component.html',
styleUrls: ['./sub-department-four.component.scss']
})
export class SubDepartmentFourComponent {
pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'ทะเบียนบริษัท']
activeTab: string = 'tab1';
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', tab.text]
this.activeTab = tab.id
}
}
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 3.5px solid #569bf5;
}
\ No newline at end of file
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-sub-department-two',
templateUrl: './sub-department-two.component.html',
styleUrls: ['./sub-department-two.component.scss']
})
export class SubDepartmentTwoComponent {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
this.activeTab = tab.id;
}
}
......@@ -26,6 +26,9 @@ import { BranchBusinessUnitComponent } from '../company-registration/branch-busi
import { DepartmentListComponent } from '../company-registration/branch-business-unit/department-list/department-list.component';
import { SubDepartmentOneComponent} from '../company-registration/branch-business-unit/sub-department-one/sub-department-one.component';
import { SubDepartmentThreeComponent} from '../company-registration/branch-business-unit/sub-department-three/sub-department-three.component';
import { SubDepartmentTwoComponent } from '../company-registration/branch-business-unit/sub-department-two/sub-department-two.component';
import { SubDepartmentFourComponent } from '../company-registration/branch-business-unit/sub-department-four/sub-department-four.component';
import { SectionRegistrationComponent } from '../company-registration/branch-business-unit/section-registration/section-registration.component';
@NgModule({
declarations: [
SalesComponent,
......@@ -46,8 +49,11 @@ import { SubDepartmentThreeComponent} from '../company-registration/branch-busin
BranchBusinessUnitComponent,
DepartmentRegisterComponent,
DepartmentListComponent,
SectionRegistrationComponent,
SubDepartmentOneComponent,
SubDepartmentTwoComponent,
SubDepartmentThreeComponent,
SubDepartmentFourComponent
],
imports: [
CommonModule,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment