570 lines
10 KiB
SCSS
570 lines
10 KiB
SCSS
.tabulator.hy-table{
|
|
background-color: white;
|
|
border: none;
|
|
margin-top: 10px;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
|
|
&.no-margin{
|
|
margin: 0;
|
|
}
|
|
|
|
// 테이블 헤더
|
|
.tabulator-header{
|
|
border-top: solid 1px $gray-004;
|
|
border-bottom: solid 1px $gray-004;
|
|
background-color: #F6F6FC;
|
|
border-left: solid 1px transparent;
|
|
|
|
.tabulator-col{
|
|
background-color: #F6F6FC;
|
|
border-right: solid 1px $gray-004;
|
|
height: 32px;
|
|
justify-content: center;
|
|
|
|
.tabulator-col-content{
|
|
|
|
.tabulator-col-title-holder {
|
|
position: static;
|
|
display: flex;
|
|
gap: 6px;
|
|
.tabulator-col-title{
|
|
font-weight: 500;
|
|
padding: 0;
|
|
}
|
|
.tabulator-col-sorter{
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
// 테이블 행
|
|
.tabulator-row{
|
|
background-color: transparent;
|
|
border: solid 0.5px $gray-004;
|
|
border-left: solid 0.5px transparent;
|
|
border-right: solid 0.5px transparent;
|
|
|
|
&:hover, &.tabulator-selected{
|
|
// background-color: $gray-003;
|
|
.tabulator-cell{
|
|
background-color: $gray-005 !important;
|
|
input:focus{
|
|
color: white;
|
|
}
|
|
}
|
|
color: white;
|
|
}
|
|
&.remove-row{
|
|
background-color: $red;
|
|
}
|
|
&.edit-row{
|
|
background-color: #d2ddff;
|
|
}
|
|
&.blank-row{
|
|
border: solid 0.5px red
|
|
}
|
|
|
|
.tabulator-cell{
|
|
border-right: solid 1px $gray-004;
|
|
background-color: rgba(233,233,233,0.54);
|
|
|
|
// &.tabulator-editable{
|
|
// background-color: transparent ;
|
|
// &::after{
|
|
// content: "";
|
|
|
|
// }
|
|
// &:hover{
|
|
// background-color: $gray-003;
|
|
// }
|
|
// }
|
|
&.tabulator-editable{
|
|
background-color: rgba(255, 255, 255, 0.55);
|
|
&::after{
|
|
content: "◥";
|
|
color: $blue-004;
|
|
position: absolute;
|
|
top: -1px;
|
|
right: -1px;
|
|
line-height: 7px;
|
|
font-size: 7px;
|
|
}
|
|
}
|
|
&.editable-cell{
|
|
background-color: rgba(255, 253, 221, 0.548) ;
|
|
&::after{
|
|
content: "◥";
|
|
color: $blue-004;
|
|
position: absolute;
|
|
top: -1px;
|
|
right: -1px;
|
|
line-height: 7px;
|
|
font-size: 7px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
// 테이블 푸터
|
|
.tabulator-footer{
|
|
border: none;
|
|
|
|
.tabulator-calcs-holder{
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 컬럼 그룹화 된 테이블
|
|
.tabulator.group-table{
|
|
|
|
// 테이블 헤더
|
|
.tabulator-header{
|
|
|
|
.tabulator-col{
|
|
height: 50px;
|
|
align-items: center;
|
|
|
|
&.tabulator-col-group{
|
|
.tabulator-col-group-cols{
|
|
border-top: solid 1px $gray-004;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.tabulator.groupby{
|
|
.tabulator-row{
|
|
|
|
&.tabulator-group {
|
|
border-bottom: solid 2px $gray-004;
|
|
border-top: none;
|
|
border-right: solid 1px $gray-004;
|
|
|
|
&:hover{
|
|
color: black;
|
|
}
|
|
|
|
&.select{
|
|
background-color: $gray-004;
|
|
}
|
|
|
|
&.tabulator-group-visible{
|
|
|
|
// .tabulator-group-toggle{
|
|
// &::before{
|
|
// content:"▼\00a0";
|
|
// }
|
|
// }
|
|
// }
|
|
// .tabulator-group-toggle{
|
|
// &::before{
|
|
// content:"▶\00a0";
|
|
// font-weight: 500;
|
|
// font-size: 11px;
|
|
// }
|
|
|
|
.tabulator-arrow{
|
|
// display: none;
|
|
}
|
|
}
|
|
|
|
span{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 생산계획등록
|
|
.tabulator.rowspan-3{
|
|
.tabulator-row{
|
|
border: none;
|
|
|
|
|
|
.tabulator-cell{
|
|
&.border-bottom{
|
|
border-bottom: solid 1px $gray-004;
|
|
}
|
|
&:not(:nth-of-type(3),:nth-of-type(4)){
|
|
border-bottom: solid 1px $gray-004;
|
|
}
|
|
|
|
&.tabulator-editable{
|
|
background: white;
|
|
}
|
|
background: #f3f3f3;
|
|
|
|
&.tabulator-frozen.tabulator-frozen-right {
|
|
border-left: none;
|
|
background-color: #f3f3f3;
|
|
}
|
|
}
|
|
|
|
&.tabulator-selectable{
|
|
background: #f3f3f3;
|
|
}
|
|
|
|
}
|
|
.tabulator-frozen.tabulator-frozen-right{
|
|
border-left: none;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// 작업자 메인화면 2 그룹화 테이블
|
|
.tabulator.group-table-style{
|
|
.tabulator-header .tabulator-col{
|
|
|
|
&.tabulator-col-group{
|
|
|
|
.tabulator-col-content{
|
|
width: 200px;
|
|
}
|
|
|
|
.tabulator-col-group-cols{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabulator-row{
|
|
border-bottom: none;
|
|
.tabulator-cell{
|
|
border-bottom: solid 1px $gray-004;
|
|
}
|
|
.tabulator-cell:nth-of-type(-n+6){
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
.tabulator-row:nth-of-type(5n+1), .tabulator-row:nth-of-type(5n+4){
|
|
|
|
.tabulator-cell:nth-of-type(2n+7){
|
|
width: 200px !important;
|
|
}
|
|
.tabulator-cell:nth-of-type(2n+8){
|
|
display: none !important;
|
|
}
|
|
}
|
|
.tabulator-row:nth-of-type(5n+5){
|
|
border-bottom: solid 1px $gray-004;
|
|
}
|
|
|
|
}
|
|
|
|
// basecode vue 테이블
|
|
/* 기본테이블 */
|
|
|
|
.bg-light{
|
|
background-color: #f8f9fa;
|
|
}
|
|
.font-weight-bold td{
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tb-height-full .cont_hfix{
|
|
height: calc(100% - 44px);
|
|
margin-top: 10px;
|
|
overflow: auto;
|
|
}
|
|
.basetable, .vue-table {
|
|
min-width: 100%;
|
|
border-collapse: separate;
|
|
border-bottom: 1px solid $gray-004;
|
|
border-top: 1px solid $gray-004;
|
|
|
|
th {
|
|
text-align: center;
|
|
background-color: #f6f6fc;
|
|
|
|
font-weight: 500;
|
|
color:#555;
|
|
height: 30px;
|
|
min-width: 100px;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
border-top: solid 1px $gray-004;
|
|
border-bottom: solid 1px $gray-004;
|
|
|
|
&:not(:first-child) {
|
|
border-left: 1px solid $gray-004;
|
|
}
|
|
}
|
|
|
|
td {
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
border-bottom: 1px solid $gray-004;
|
|
height: 31px;
|
|
|
|
&:not(:last-child:first-child) {
|
|
border-left: 1px solid $gray-004;
|
|
}
|
|
&:last-child:first-child {
|
|
border-right: 1px solid $gray-004;
|
|
}
|
|
}
|
|
|
|
thead.top_sticky, .basetable thead.top_sticky th {
|
|
position: sticky;
|
|
top:0;
|
|
left:0;
|
|
}
|
|
}
|
|
.vue-table {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
thead{
|
|
position: sticky;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
th{
|
|
min-width: auto;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
td{
|
|
text-wrap: wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
|
|
|
|
&.sts-order-table{
|
|
thead{
|
|
z-index: 3;
|
|
tr{
|
|
th{
|
|
border-bottom: 2px solid $blue-004;
|
|
|
|
&:not(:last-child){
|
|
border-right: 2px solid $blue-004;
|
|
}
|
|
&:first-child{
|
|
position: sticky;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
&:nth-of-type(2){
|
|
position: sticky;
|
|
left: 145px;
|
|
top: 0;
|
|
}
|
|
&:not(:first-child){
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
tbody{
|
|
tr{
|
|
position: relative;
|
|
|
|
td{
|
|
height: 20px;
|
|
// border: none;
|
|
|
|
&.border-none{
|
|
border: none;
|
|
}
|
|
&.border-right{
|
|
border-right: 2px solid $blue-004;
|
|
}
|
|
&.border-bottom{
|
|
border-bottom: 2px solid $blue-004;
|
|
}
|
|
}
|
|
|
|
// 정보 셀(sticky)
|
|
//
|
|
&:nth-of-type(5n), &:nth-of-type(5n-2), &:nth-of-type(5n-4) {
|
|
td{
|
|
&:nth-of-type(1){
|
|
position: sticky;
|
|
left: 0px;
|
|
background: white;
|
|
width: 70px;
|
|
box-sizing: border-box;
|
|
|
|
z-index: 2;
|
|
}
|
|
&:nth-of-type(2){
|
|
position: sticky;
|
|
left: 70px;
|
|
background: white;
|
|
|
|
border-right: 2px solid $blue-004;
|
|
z-index: 2;
|
|
}
|
|
|
|
}
|
|
}
|
|
&:nth-of-type(5n-2), &:nth-of-type(5n-4) {
|
|
td{
|
|
&:nth-of-type(3){
|
|
z-index: 1;
|
|
position: sticky;
|
|
left: 145px;
|
|
background: white;
|
|
}
|
|
}
|
|
}
|
|
&:nth-of-type(5n-1), &:nth-of-type(5n-3) {
|
|
td{
|
|
&:nth-of-type(1){
|
|
position: sticky;
|
|
left: 0px;
|
|
background: white;
|
|
|
|
border-right: 2px solid $blue-004;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// row bottom
|
|
&.border-bottom{
|
|
td{
|
|
border-bottom: 2px solid $blue-004;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// 품목코드등록-라우팅 테이블
|
|
.tabulator.hy-table.hide-sub-column{
|
|
.tabulator-header{
|
|
|
|
.tabulator-col.tabulator-col-group{
|
|
&.width-150{
|
|
width: 150px;
|
|
}
|
|
&.width-160{
|
|
width: 160px;
|
|
}
|
|
&.width-180{
|
|
width: 180px;
|
|
}
|
|
&.width-200{
|
|
width: 200px;
|
|
}
|
|
&.min-width-200{
|
|
min-width: 200px;
|
|
}
|
|
&.width-230{
|
|
width: 230px;
|
|
}
|
|
&.width-800{
|
|
width: 800px;
|
|
}
|
|
.tabulator-col-group-cols{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 테이블 소계 및 합계 css
|
|
|
|
.tabulator.hy-table{
|
|
|
|
.tabulator-calcs{
|
|
position: relative;
|
|
.tabulator-cell:nth-of-type(1){
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
border-right: solid 2px $gray-004;
|
|
background: #e9e9e9;
|
|
z-index: 999;
|
|
|
|
&::after {
|
|
content: "소계";
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.tabulator-cell{
|
|
&.tabulator-editable{
|
|
border-right: solid 1px #e9e9e9;
|
|
background-color: rgba(233, 233, 233, 0.54);
|
|
|
|
&::after{
|
|
content: '';
|
|
}
|
|
&::before{
|
|
content: '';
|
|
}
|
|
}
|
|
&.editable-cell{
|
|
border-right: solid 1px #e9e9e9;
|
|
background-color: rgba(233, 233, 233, 0.54);
|
|
&::after{
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
|
|
// .tabulator-cell:nth-of-type(2){
|
|
// width: 150px !important;
|
|
// }
|
|
}
|
|
|
|
.tabulator-footer{
|
|
|
|
.tabulator-calcs{
|
|
.tabulator-cell:nth-of-type(1)::after {
|
|
content: "합계";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.status-table.vue-table{
|
|
colgroup{
|
|
col{}
|
|
}
|
|
thead{
|
|
tr{
|
|
th{}
|
|
}
|
|
}
|
|
|
|
tbody{
|
|
tr{
|
|
td{
|
|
&.on{
|
|
background-color: $gray-004;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|