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

init dev-push code ui base design

Browse Source
This commit is contained in:
leonard
2025-07-22 09:58:38 +07:00
parent ffdf5ccb66
commit eedbf94d56
214 changed files with 42170 additions and 28040 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,95 +1,61 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<v-row class="search-box" align="center">
<v-col :cols="option.labelCols" class="py-0">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon v-if="item.iconShow" small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="item.required || false"
:disabled="item.disabled || false"
></v-text-field>
<v-text-field readonly v-model="selectValue" append-icon="mdi-magnify"
:class="['v-select__custom', customClass]"
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
:required="item.required || false"></v-text-field>
<!-- :disabled="item.disabled || false" -->
</v-col>
<v-dialog v-model="dialog" scrollable width="1000px">
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ option.modalTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
<v-icon @click="dialogOpenCloseEvent(dialog)">mdi-close</v-icon>
</v-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="2">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
검색
</label>
</v-col>
<v-col :cols="6">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
outlined
:hide-details="true"
v-model="searchWord"
@keyup.enter="search"
></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-col cols="4" class="text-right">
<v-btn :ripple="false" @click="search()">
조회
</v-btn>
<!-- <v-btn :ripple="false" @click="initSearch()">
초기화
</v-btn> -->
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<v-row align="end" class="pa-5" no-gutters>
<v-col :cols="2.5" class="mr-2">
<v-row>
<v-col :cols="2">
<label for="" class="search-box-label">
<!-- <v-icon small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon> -->
검색
</label>
</v-col>
<v-col :cols="12">
<v-text-field append-icon="mdi-magnify" class="v-input__custom" outlined :hide-details="true"
v-model="searchWord" @keyup.enter="search"></v-text-field>
</v-col>
</v-row>
</v-col>
<a-button type="primary" :ripple="false" @click="search()">
조회
</a-button>
</v-row>
<!-- <div :style="'height: calc(65vh)'"> -->
<div :style="'height: 600px'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.modalData2.evtObjPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate($event)"
/>
<!-- :is="loadGrid && dialog ? 'Grid' : null" -->
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
:dataPath="searchParam.modalData2.evtObjPop" :parentPrgmId="parentPrgmId" @getRowsData="getRowData"
@dblClick="setUpdate($event)" />
</div>
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate('init')">초기화</v-btn>
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
<v-card-actions class="pa-5 d-flex align-center justify-end">
<a-button type="default" class="mr-2" :ripple="false" @click="dialogOpenCloseEvent(dialog)">닫기</a-button>
<a-button type="primary" class="mr-2" :ripple="false" @click="setUpdate('init')">초기화</a-button>
<a-button type="primary" :ripple="false" @click="setUpdate($event)">확인</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -139,7 +105,11 @@ export default {
bindingData: {
type: String,
require: false,
}
},
customClass: {
type: String,
require: false,
},
// bindingFlag:{
// type:Boolean,
// require: false,
@ -154,7 +124,7 @@ export default {
return {
dialog: false,
loadGrid: false,
loadGrid: true,
grid_01: 'grid_01',
myModalKey: 'evtObjPop',
modalDataKey: 'modalData2',
@ -195,6 +165,35 @@ export default {
computed: {
...mapState({
searchParam(state) {
const myOptions = {
columnOptions: {
resizable: true,
},
treeColumnOptions: {
name: 'readPlcNm', // Showing tree table
useIcon: false, // Not using icon
indentWidth: 10,
},
};
const dataPathMock = {
'grid_01': {
column: [
{ header: '검침개소명', name: 'readPlcNm', align: 'left', minWidth: 400, },
{ header: '검침개소', name: 'plcKind', minWidth: 100, align: 'center', },
// {
// header: '사용 여부', name: 'useFg', minWidth: 100, align: 'center',
// },
],
data: sampleData,
option: myOptions
}
};
return {
modalData2: {
evtObjPop: dataPathMock
}
}
// end test
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
@ -209,7 +208,7 @@ export default {
}),
selectValue: {
get() {
if(this.formFlag){
if (this.formFlag) {
if (!this.item) {
return this.textFieldData;
}
@ -217,12 +216,12 @@ export default {
// return "NONE";
// }
else {
return this.myBindingData
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
: this.textFieldData;
}
}else{
} else {
// grid와 바인딩 안했을 때
return this.textFieldData;
}
@ -251,7 +250,7 @@ export default {
created() {
this.init();
},
mounted() {},
mounted() { },
methods: {
...mapMutations({
setPageData: 'setPageData',
@ -301,7 +300,7 @@ export default {
});
},
async getGridData() {
this.loadGrid = false;
// this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectTagBaseInfo',
@ -325,7 +324,7 @@ export default {
},
setUpdate(v) {
// 초기화
if(v == 'init'){
if (v == 'init') {
this.selectedData.tagId = null;
this.selectedData.tagNm = null;
}
@ -334,9 +333,9 @@ export default {
this.textFieldData = this.selectedData.tagId;
} else {
// let formFg = this.item.formFg != undefined ? this.item.formFg : this.formFg;
if(this.formFlag){
if (this.formFlag) {
if (this.item.bindNm) {
this.myBindingData[this.item.bindNm] = this.selectedData.tagNm;
this.myBindingData[this.item.bindNm] = this.selectedData.tagNm;
} else {
this.myBindingData.tagNm = this.selectedData.tagNm;
}
@ -360,16 +359,16 @@ export default {
};
this.$emit('gridEditingFinish', dt);
}
}else{
} else {
// grid와 binding 안되어있는 경우
this.textFieldData = this.selectedData.tagNm;
this.setPageData({
tagId: this.selectedData.tagId,
// [this.item.tagNm]: this.selectedData.tagNm
});
}
}
},
dialogOpenCloseEvent(val) {
@ -377,6 +376,7 @@ export default {
// this.dialog = false;
// return;
// }
console.log("this.dialog: ", this.dialog);
this.dialog = !val;
},
},
@ -389,6 +389,50 @@ var evtObjPop = {
option: {},
},
};
const sampleData = [
{
readPlcNm: '서울 본사',
plcKind: '본사',
useFg: '사용',
_children: [
{
readPlcNm: '서울 본사 - 1층',
plcKind: '층',
useFg: '사용',
},
{
readPlcNm: '서울 본사 - 2층',
plcKind: '층',
useFg: '미사용',
},
],
},
{
readPlcNm: '부산 지사',
plcKind: '지사',
useFg: '사용',
_children: [
{
readPlcNm: '부산 지사 - A동',
plcKind: '건물',
useFg: '사용',
_children: [
{
readPlcNm: '부산 지사 - A동 1층',
plcKind: '층',
useFg: '사용',
},
],
},
],
},
{
readPlcNm: '대전 창고',
plcKind: '창고',
useFg: '미사용',
},
];
</script>
<style lang="scss" scoped>
@ -404,33 +448,8 @@ var evtObjPop = {
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
content: none !important;
}
}
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.v-dialog {
.v-card {
&__title {
color: map-deep-get($color, 'white', '0');
@if $theme == dark {
background-color: #2d3355;
.v-btn {
background-color: #2d3355;
}
} @else {
background-color: #3f4d7d;
.v-btn {
background-color: #3f4d7d;
}
}
}
}
}
}
}
</style>