File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div>
<div
v-show="!preview"
class="data_control flexCenter mt10"
style="display: flex; justify-content: space-evenly"
>
<div class="col-4 fl alignC">
<label for="datastart"> 데이터 시작 행 </label>
<div class="flexBox" style="align-items: center !important">
<input
type="text"
name="datastart"
v-model="rowIndex"
@blur="updateRowIndex"
@keyup.enter="updateRowIndex"
/>
<div class="updownbox flexBox">
<input
type="button"
value="▲"
class="input_up"
@click="dataTableInfo.startRowIndex++"
/>
<input
type="button"
value="▼"
class="input_down"
@click="dataTableInfo.startRowIndex--"
/>
</div>
</div>
</div>
<div class="col-4 fl alignL">
<label for="dataend"> 데이터 시작 열 </label>
<div class="flexBox" style="align-items: center !important">
<input
type="text"
name="dataend"
v-model="cellIndex"
@blur="updateCellIndex"
@keyup.enter="updateCellIndex"
/>
<div class="updownbox flexBox">
<input
type="button"
value="▲"
class="input_up"
@click="dataTableInfo.startCellIndex++"
/>
<input
type="button"
value="▼"
class="input_down"
@click="dataTableInfo.startCellIndex--"
/>
</div>
</div>
</div>
</div>
<div class="datatableInfoBox" style="max-height: 550px; overflow: auto">
<div class="table-zone">
<!-- <div class="list-info flex justify-between align-center">
<div class="count-zone">
<p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
</div>
</div> -->
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 10%" />
<col
v-for="(info, i) in dataTableInfo.changeColumnDatas"
:key="i"
:style="changeWidth()"
/>
</colgroup>
<thead>
<tr>
<th>No</th>
<th
v-for="(info, i) in dataTableInfo.changeColumnDatas"
:key="i"
:style="
i < dataTableInfo.startCellIndex
? 'background-color: #dfdfdf;'
: null
"
>
[{{ i + 1 }}]
</th>
</tr>
</thead>
<!-- <tbody>
<tr>
<th :class="{ selected: getRowDataColumnIndex < 0 }">[1]</th>
<td :class="{
selected: getRowDataColumnIndex < 0
, disabled: getStartRowIndex >= 0 || dataTableInfo.startCellIndex > j
}"
v-for="(info, j) in dataTableInfo.changeColumnDatas">
{{ dataTableInfo.columnDatas[j].displyColumnNm }}
</td>
</tr>
<tr v-for="(cells, i) in dataTableInfo.rowData" v-if="i < viewCount">
<th :class="{ selected: getRowDataColumnIndex == i }">[{{ i + 2 }}]</th>
<td :class="{
selected: getRowDataColumnIndex == i
, disabled: getStartRowIndex > i || dataTableInfo.startCellIndex > j
}"
v-for="(value, j) in cells" :title="value">
{{ value }}
</td>
</tr>
<tr v-if="postList === 0">
<td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody> -->
<tbody>
<tr>
<th>[1]</th>
<td
v-for="(info, j) in dataTableInfo.changeColumnDatas"
:key="j"
:style="
j < dataTableInfo.startCellIndex
? 'background-color: #dfdfdf;'
: 'background-color: #fdd2d2;'
"
>
{{ dataTableInfo.columnDatas[j].displyColumnNm }}
</td>
</tr>
<tr
v-for="(cells, i) in dataTableInfo.rowData"
:key="i"
:style="
i + 1 < dataTableInfo.startRowIndex
? 'background-color: #dfdfdf;'
: null
"
>
<th>[{{ i + 2 }}]</th>
<td
v-for="(value, j) in cells"
:key="j"
:title="value"
:style="
j < dataTableInfo.startCellIndex
? 'background-color: #dfdfdf;'
: null
"
>
{{ value }}
</td>
</tr>
<tr v-if="postList === 0">
<td colspan="5" class="no-list">
검색조건에 해당하는 데이터가 없습니다.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import _ from "lodash";
export default {
name: "file-data-read",
props: {
isLoading: {
type: Boolean,
// default: true,
},
dataTable: {
type: Object,
default: {},
},
// 미리보기, 데이터셋 설정 화면 구분
preview: {
type: Boolean,
default: false,
},
},
data() {
return {
dataTableInfo: this.dataTable,
columnIndex: this.dataTable.rowDataColumnIndex,
rowIndex: this.dataTable.startRowIndex + 1,
cellIndex: this.dataTable.startCellIndex + 1,
};
},
methods: {
// 데이터 확정후 창닫기
displayIndex: function (index) {
if (index) {
return index + 1;
} else {
return 1;
}
},
// 데이터 테이블 넓이 조정
changeWidth: function () {
return `width: ${90 / this.dataTableInfo.changeColumnDatas.length}%`;
},
// 데이터 시작 행 변경
updateRowIndex() {
this.dataTableInfo.startRowIndex = this.rowIndex - 1; // 엔터나 입력창 바깥 클릭 시 값 업데이트
},
// 데이터 시작 열 변경
updateCellIndex() {
this.dataTableInfo.startCellIndex = this.cellIndex - 1; // 엔터나 입력창 바깥 클릭 시 값 업데이트
},
},
watch: {
dataTable: function (v) {
//데이터 테이블 정보 변경 시(다른 데이터 셋 선택시)
this.dataTableInfo = _.cloneDeep(v);
// 데이터 테이블 변경 이력이 없을 시 초기 세팅
if (!v.columnNameChange) {
for (let i = 0; i < this.dataTableInfo.columnDatas.length; i++) {
// this.dataTableInfo.changeColumnDatas[i].columnNm = "col"+i;//*columnNm = 저장될 컬럼명
this.dataTableInfo.columnDatas[i].columnNm = "col" + i; //*columnNm = 저장될 컬럼명
//*displyColumnNm
if (this.dataTableInfo.columnDatas[i].orginlColumnNm) {
//원본 cell의 value가 빈값이 아닐 때
//displyColumnNm = 원본 cell의 value
// this.dataTableInfo.changeColumnDatas[i].displyColumnNm = this.dataTableInfo.columnDatas[i].orginlColumnNm;
this.dataTableInfo.columnDatas[i].displyColumnNm =
this.dataTableInfo.columnDatas[i].orginlColumnNm;
} else {
//원본 cell의 value가 빈값일 때
//displyColumnNm = columnNm(DB에 생성될 컬럼명)
// this.dataTableInfo.changeColumnDatas[i].displyColumnNm = "col"+i;
this.dataTableInfo.columnDatas[i].displyColumnNm = "col" + i;
}
}
this.dataTableInfo.originalColumnDatas = _.cloneDeep(
this.dataTableInfo.columnDatas
); // 원본 컬럼행 데이터 저장
this.dataTableInfo.changeColumnDatas = _.cloneDeep(
this.dataTableInfo.columnDatas
); // 변경된 컬럼행 데이터 저장 (원본도 변경하는데 왜 필요한거지?)
}
this.$emit("update:isLoading", false); // 데이터테이블 복사 완료 시 로딩 해제
},
//데이터 시작 행의 Index
"dataTableInfo.startRowIndex": function (value) {
this.rowIndex = value + 1;
//value(Index)값이 숫자가 아닐 때 => 0
try {
if (typeof parseInt(value) !== "number") {
this.dataTableInfo.startRowIndex = 0;
this.rowIndex = this.dataTableInfo.startRowIndex + 1;
return;
}
} catch (e) {
this.dataTableInfo.startRowIndex = 0;
this.rowIndex = this.dataTableInfo.startRowIndex + 1;
return;
}
let maxIndex = this.dataTableInfo.rowData.length; //컬럼(필드)행의 최대 Index = 데이터의 행 수 - 1
if (value < 0) {
//value(Index)가 데이터 시작 행의 Index보다 작을 때
this.dataTableInfo.startRowIndex = 0;
this.rowIndex = this.dataTableInfo.startRowIndex + 1;
this.dataTableInfo.rowDataColumnIndex = 0;
} else if (value > maxIndex) {
//value(Index)가 최대 Index 보다 클 때
this.dataTableInfo.startRowIndex = maxIndex;
this.rowIndex = maxIndex + 1;
this.dataTableInfo.rowDataColumnIndex = maxIndex;
} else {
//정상적으로 바뀔 때
this.dataTableInfo.changeColumnDatas = _.cloneDeep(
this.dataTableInfo.columnDatas
);
if (value > 0) {
//원본 컬럼으로 바뀌는게 아닐 때
//rowData에서 row정보를 받아옴
let row = this.dataTableInfo.rowData[value - 1];
for (
let i = 0;
i < this.dataTableInfo.changeColumnDatas.length;
i++
) {
this.dataTableInfo.changeColumnDatas[i].orginlColumnNm = row[i]; //*orginlColumnNm = 원본 cell의 value
this.dataTableInfo.changeColumnDatas[i].columnNm = "col" + i; //*columnNm = 저장될 컬럼명
this.dataTableInfo.columnDatas[i].orginlColumnNm = row[i]; //*orginlColumnNm = 원본 cell의 value
this.dataTableInfo.columnDatas[i].columnNm = "col" + i; //*columnNm = 저장될 컬럼명
//*displyColumnNm
if (row[i]) {
//원본 cell의 value가 빈값이 아닐 때
//displyColumnNm = 원본 cell의 value
this.dataTableInfo.changeColumnDatas[i].displyColumnNm = row[i];
this.dataTableInfo.columnDatas[i].displyColumnNm = row[i];
} else {
//원본 cell의 value가 빈값일 때
//displyColumnNm = columnNm(DB에 생성될 컬럼명)
this.dataTableInfo.changeColumnDatas[i].displyColumnNm =
"col" + i;
this.dataTableInfo.columnDatas[i].displyColumnNm = "col" + i;
}
}
}
//★ 메모상에서 컬럼 데이터 변경 여부
this.dataTableInfo.columnNameChange = true;
}
this.dataTableInfo.rowDataColumnIndex = this.dataTableInfo.startRowIndex;
// 데이터 시작 행이 0일 때, 초기 컬럼 데이터로 변경
if (this.dataTableInfo.startRowIndex == 0) {
this.dataTableInfo.columnDatas = _.cloneDeep(
this.dataTableInfo.originalColumnDatas
);
}
this.$emit("index-change", this.dataTableInfo);
},
//데이터 시작 열의 Index
"dataTableInfo.startCellIndex": function (value) {
this.cellIndex = value + 1;
//value(Index)값이 숫자가 아닐 때 => 0
try {
if (typeof parseInt(value) !== "number") {
this.dataTableInfo.startCellIndex = 0;
this.cellIndex = this.dataTableInfo.startCellIndex + 1;
return;
}
} catch (e) {
this.dataTableInfo.startCellIndex = 0;
this.cellIndex = this.dataTableInfo.startCellIndex + 1;
return;
}
//데이터 시작 열 최대 Index = 데이터의 컬럼 갯수
let maxIndex = this.dataTableInfo.columnDatas.length - 1;
if (value < 0) {
//value(Index)가 0보다 작을 때
this.dataTableInfo.startCellIndex = 0;
this.cellIndex = this.dataTableInfo.startCellIndex + 1;
return;
} else if (value > maxIndex) {
//value(Index)가 최대 Index 보다 클 때
this.dataTableInfo.startCellIndex = maxIndex;
this.cellIndex = maxIndex + 1;
return;
}
this.$emit("index-change", this.dataTableInfo);
},
},
computed: {
//column Index에 의한 컬럼 사용 타입 변경 => Index 미만 컬럼은 사용 불가
columnUseChange: function (columnDatas, index) {
for (let i = 0; i < columnDatas.length; i++) {
if (i > index - 1) {
columnDatas[i].useAt = true;
} else {
columnDatas[i].useAt = false;
}
}
},
},
};
</script>