gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-trungvq7-0729

Browse Source
This commit is contained in:
dev
2025-08-13 17:14:44 +09:00
parent 287c68252b 59ec2eda59
commit d5c59286ad
54 changed files with 1483 additions and 1300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/common/CheckBox.vue
View File

@ -61,10 +61,6 @@ export default {
require: false,
default: true
},
labelClass: {
type: String,
require: false,
},
},
data() {
return {

15
components/common/Datepicker.vue
View File

@ -19,15 +19,18 @@
readonly
outlined
>
<template #append >
<!-- <template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
</template> -->
<template v-slot:append>
<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
<img :src="arrowIcon">
</div>
<v-text-field
v-show="isRange"
@ -40,7 +43,9 @@
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -209,9 +214,9 @@ export default {
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {

97
components/common/DatepickerTopView.vue
View File

@ -5,10 +5,7 @@
<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
> -->
<v-icon
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>
<v-icon small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
$icoBulletPoint
</v-icon>
{{ label }}
@ -16,17 +13,11 @@
</v-col>
<v-col :cols="label ? textCols : ''">
<div class="datepicker-container">
<v-text-field
id="startpicker"
ref="startpicker"
v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template v-slot:append>
<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
@ -36,18 +27,13 @@
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
</div>
<v-text-field
v-show="isRange"
id="endpicker"
ref="endpicker"
v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -91,9 +77,9 @@ export default {
require: false,
default: false,
},
isRangeOption:{
type:Boolean,
require:false,
isRangeOption: {
type: Boolean,
require: false,
default: true
}
},
@ -177,21 +163,23 @@ export default {
this.myOptions.viewFormat,
);
},
toDtChange(){
toDtChange() {
return {
isCheck:this.searchParam.isCheck ,
toDt : Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
)};
isCheck: this.searchParam.isCheck,
toDt: Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
)
};
},
fromDtChange(){
fromDtChange() {
return {
isCheck:this.searchParam.isCheck ,
fromDt : Utility.setFormatDate(
isCheck: this.searchParam.isCheck,
fromDt: Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
)};
)
};
},
defaultRange() {
return this.searchParam.defaultRange
@ -205,10 +193,10 @@ export default {
);
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
if (this.isDarkMode) {
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {
@ -242,24 +230,24 @@ export default {
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
fromDtChange:{
deep:true,
handler(){
if(this.fromDtChange.isCheck){
fromDtChange: {
deep: true,
handler() {
if (this.fromDtChange.isCheck) {
this.fromDtChanged(this.fromDtChange.fromDt);
this.setPageData({
isCheck : false
isCheck: false
})
}
}
},
toDtChange:{
deep:true,
handler(){
if(this.toDtChange.isCheck){
toDtChange: {
deep: true,
handler() {
if (this.toDtChange.isCheck) {
this.toDtChanged(this.toDtChange.toDt);
this.setPageData({
isCheck : false
isCheck: false
})
}
}
@ -370,7 +358,7 @@ export default {
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
@ -400,7 +388,7 @@ export default {
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
@ -424,6 +412,7 @@ export default {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}

74
components/common/Grid.vue
View File

@ -158,7 +158,7 @@ export default {
}, 500);
},
},
created() {},
created() { },
async mounted() {
// console.log(this.dataPath);
if (this.gridName) {
@ -166,9 +166,9 @@ export default {
this.scrollBody = document
.getElementsByClassName('tui-grid-rside-area')
[
document.getElementsByClassName('tui-grid-rside-area').length - 1
].getElementsByClassName('tui-grid-body-area')[0];
[
document.getElementsByClassName('tui-grid-rside-area').length - 1
].getElementsByClassName('tui-grid-body-area')[0];
this.scrollBody.addEventListener('scroll', e => {
this.gridScrollTop = e.target.scrollTop;
@ -344,14 +344,14 @@ export default {
'row-removed',
);
}
await this.gridInstance.invoke(
e.rowEditingFg != undefined ? 'setValue' : this.editorGrid ? 'finishEditing' : 'setValue',
rowIdxKey,
columnName,
value,
);
if (isBaseRow) {
const isSameData = await this.compareData(editingData);
@ -606,18 +606,20 @@ export default {
list.map(item => this.gridInstance.invoke('check', item));
},
refreshLayout() {
// console.log("---------DEBUG---refreshLayout: ");
this.gridInstance.invoke('refreshLayout');
setTimeout(() => {
this.gridInstance.invoke('refreshLayout');
}, 150);
// this.gridInstance.invoke('refreshLayout');
},
refreshGrid(){
refreshGrid() {
// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
var containerEl = this.$refs['tuigrid' + this.gridName].$el;
// var containerEl = document.querySelector('.tui-grid-container')
var parentEl = containerEl.parentElement;
var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
var containerEl = this.$refs['tuigrid' + this.gridName].$el;
// var containerEl = document.querySelector('.tui-grid-container')
var parentEl = containerEl.parentElement;
// console.log("---------DEBUG---containerEl: ",containerEl);
// console.log('---------DEBUG---parentEl: ', parentEl)
// console.log('---------DEBUG---parentEl: ', parentEl)
// function refreshLayout(store, containerEl, parentEl) {
var dimension = store.dimension;
var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
@ -636,35 +638,35 @@ export default {
// console.log("parentEl.clientHeight" , parentEl.clientHeight)
// console.log("clientHeight : ",clientHeight);
if (parentEl && parentEl.clientHeight !== clientHeight) {
var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
}
// }
// }
},
setOffsetTop(store, offsetTop) {
setOffsetTop(store, offsetTop) {
// console.log("---------DEBUG---setOffsetTop: ");
store.dimension.offsetTop = offsetTop;
},
setWidth(_a, width, autoWidth) {
store.dimension.offsetTop = offsetTop;
},
setWidth(_a, width, autoWidth) {
// console.log("---------DEBUG---setWidth: ");
var dimension = _a.dimension;
dimension.autoWidth = autoWidth;
dimension.width = width;
},
setHeaderHeight(store, height) {
var dimension = _a.dimension;
dimension.autoWidth = autoWidth;
dimension.width = width;
},
setHeaderHeight(store, height) {
// console.log("---------DEBUG---setHeaderHeight: ");
store.dimension.headerHeight = height;
},
setOffsetLeft(store, offsetLeft) {
store.dimension.headerHeight = height;
},
setOffsetLeft(store, offsetLeft) {
// console.log("---------DEBUG---setOffsetLeft: ");
store.dimension.offsetLeft = offsetLeft;
},
setHeight(_a,height){
store.dimension.offsetLeft = offsetLeft;
},
setHeight(_a, height) {
// console.log("---------DEBUG---setHeight: ");
var dimension = _a.dimension;
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
},
var dimension = _a.dimension;
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
},
sendSelectedRowData(eventRowKey) {
if (this.selectedRowDataWatchFlag) {
var rowKey =

53
components/common/PastRsltDatePicker.vue
View File

@ -2,25 +2,19 @@
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon small color="primary"
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon>
<v-icon small color="primary"
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<div :class="['datepicker-container', customClass]" >
<v-text-field
id="startpicker"
ref="startpicker"
v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
<div :class="['datepicker-container', customClass]">
<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
<!-- <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> -->
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
@ -29,18 +23,13 @@
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
</div>
<v-text-field
v-show="isRange"
id="endpicker"
ref="endpicker"
v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -98,6 +87,7 @@ export default {
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: "isDarkMode",
}),
myCmCycle() {
return this.searchParam.cmCycle;
@ -138,10 +128,10 @@ export default {
);
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
if (this.isDarkMode) {
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {
@ -280,7 +270,7 @@ export default {
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
@ -310,7 +300,7 @@ export default {
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
@ -334,6 +324,7 @@ export default {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}

4
components/common/button/ActionButtons.vue
View File

@ -2,9 +2,9 @@
<div class="d-flex justify-center align-center"
:class="directionBtn === 'vertically'?'flex-row':'flex-column'"
style="gap: 12px">
<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" class="custom-action-btn">
<a-button @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') : btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.remove :icons.add " class="custom-action-btn">
</a-button>
<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add" class="custom-action-btn">
<a-button @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') :btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.add :icons.remove" class="custom-action-btn">
</a-button>
</div>
</template>

11
components/common/chartoptions/GaugeChart.js
View File

@ -2,15 +2,13 @@
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
const colorRanges = isDarkMode
? [
[0.375, '#49AA19'], // Dark Green
// [0.5, '#B8860B'], // Dark Yellow
[0.625, '#D89614'], // Dark Orange
[60 / 160, '#49AA19'], // Dark Green
[100 / 160, '#D89614'], // Dark Orange
[1, '#D32029'], // Dark Red
]
: [
[0.375, '#52C41A'], // Light Green
// [0.5, '#FFD700'], // Light Yellow
[0.625, '#FAAD14'], // Light Orange
[60 / 160, '#52C41A'], // Light Green
[100 / 160, '#FAAD14'], // Light Orange
[1, '#F5222D'], // Light Red
];
// Old color range
@ -56,6 +54,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
endAngle: -45,
min: min,
max: max,
splitNumber: 8,
// progress: {
// show: true,
// width: 15,

2
components/common/chartoptions/LineChart.js
View File

@ -34,6 +34,8 @@ export default function getLineChartOption({
legend: {
// data: legendData,
icon: 'circle',
itemWidth: 15, // Width of the legend icon
itemHeight: 15,
top: '0%',
right: '5%',
orient: 'horizontal',

17
components/common/modal/ChangeUserPswdPopPage.vue
View File

@ -3,12 +3,13 @@
<v-col v-if="item.label" :cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
v-if="item.iconShow"
small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ item.label }}
<span v-if="item.essential">*</span>
</label>
<!-- <label for="" class="search-box-label ft-size_14 ft-clr_g-c">
{{ item.label }}
@ -39,12 +40,12 @@
</template>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<v-dialog v-model="dialog" scrollable width="504px">
<v-card style="height: 100%">
<v-card-title>
<span class="custom-title-4">비밀번호 {{ isPassword }}</span>
<v-card-title class="px-4">
<span class="custom-title-4" style="padding-left: 1px;">비밀번호 {{ isPassword }}</span>
</v-card-title>
<v-card-text class="pb-4">
<v-card-text class="pb-4 px-3">
<v-col>
<label for="" class="search-box-label">
{{ isPassword }}할 비밀번호를 입력하세요

10
components/common/modal/ElecPowChrgPop.vue
View File

@ -17,20 +17,24 @@
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? item.textCols : ''">
<v-col :cols="label ? item.textCols : ''" class="py-0">
<!-- <v-col :cols="label ? 9 : ''"> -->
<!-- :value="textfield" -->
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialog = !dialog"
outlined
:hide-details="true"
:disabled="item.disabled || false"
:required="item.required || false"
></v-text-field>
>
<template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template>
</v-text-field>
</v-col>
<!-- <v-row justify="center"> -->

2
components/common/modal/EvtObjPop.vue
View File

@ -1,5 +1,5 @@
<template>
<v-row class="search-box no-gutters" align="center">
<v-row class="search-box" align="center">
<v-col :cols="option.labelCols" class="py-0">
<label for="" class="search-box-label">
<v-icon v-if="item.iconShow" small

2
components/common/modal/ReadPlcPop.vue
View File

@ -1,5 +1,5 @@
<template>
<v-row class="search-box" align="center">
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
<label for="" class="search-box-label">