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

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

@ -1,85 +1,63 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-row class="search-box" align="center" >
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<v-col v-if="item.label" :cols="item.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>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-col :cols="item.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>
<v-text-field readonly v-model="selectValue" append-icon="" class="v-input__custom"
@click="dialog = !dialog" outlined :hide-details="true" :disabled="item.disabled || false"
:required="item.required || false"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="600"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-dialog v-model="dialog" width="800px" scrollable>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
<v-card style="height: 100%">
<v-card-title
class="v-card__title d-flex align-center justify-space-between"
>
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ item.label }}</span>
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
<v-icon>mdi-close</v-icon>
</v-btn>
<a-button icon="close" type="text" @click="dialog = false"></a-button>
</v-card-title>
<!-- <v-card-actions> -->
<div class="pa-5">
<div class="pa-6 pt-0">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col v-if="label" cols="3">
<v-row align="center">
<v-col v-if="label" cols="12" class="py-0">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon small
:class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? 6 : ''">
<v-col :cols="label ? 6 : ''" class="py-0">
<!-- :value="textfield" -->
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
outlined
:hide-details="true"
v-model="searchWord"
@keyup.enter="typeEnterKey"
></v-text-field>
<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
v-model="searchWord" @keyup.enter="typeEnterKey"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-col cols="3" class="text-right">
<v-btn :ripple="false" icon tile @click="btnTreeExpand()">
<!-- {{ treeExpand }} -->
<v-icon
size="30"
v-text="treeExpandAll ? 'mdi-chevron-up' : 'mdi-chevron-down'"
></v-icon>
<v-icon size="30"
v-text="treeExpandAll ? 'mdi-chevron-up' : 'mdi-chevron-down'"></v-icon>
</v-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
@ -98,20 +76,13 @@
<!-- <v-btn color="primary" dark>초기화</v-btn> -->
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</div>
<!-- </v-card-actions> -->
<v-divider></v-divider>
<v-card-text>
<div ref="treeGridParent" style="height: 500px">
<component
:ref="'treeGrid' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree"
:dataPath="searchParam.modalData.selectReadObjListTree"
:parentPrgmId="parentPrgmId"
:bindingData="bindingData"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
<component :ref="'treeGrid' + parentPrgmId" :is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree" :dataPath="searchParam.modalData.selectReadObjListTree"
:parentPrgmId="parentPrgmId" :bindingData="bindingData" @getRowsData="getRowData"
@dblClick="setUpdate()" />
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
@ -119,24 +90,9 @@
/> -->
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
<!-- <v-btn
color="green darken-1"
text
@click="dialog = false"
>
Disagree
</v-btn>
<v-btn
color="green darken-1"
text
@click="dialog = false"
>
Agree
</v-btn> -->
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
<a-button :ripple="false" @click="setUpdate()" class="mr-2">확인</a-button>
<a-button :ripple="false" type="primary" @click="dialog = false" class="mr-2">닫기</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -199,7 +155,7 @@ export default {
myModalKey: 'selectReadObjListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
loadGrid: true,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
@ -308,6 +264,17 @@ export default {
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [
{
header: '',
name: '',
align: 'center',
width: 50,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{
header: '검침개소명',
name: 'readPlcNm',
@ -322,23 +289,69 @@ export default {
async getTreeData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectReadPlcBaseInfo',
resKey: 'readPlcBaseInfoData',
sendParam: {
blocId:
this.searchParam.blocMstrList.length > 0
? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
: this.searchParam.blocId, //"BL0001",
// readObjId: this.searchParam.readObj, // "MTT00001" // 전력 코드 고정
readObjId: this.searchParam.searchReadObj, // "MTT00001" // 전력 코드 고정
// const res = await this.postApiReturn({
// apiKey: 'selectReadPlcBaseInfo',
// resKey: 'readPlcBaseInfoData',
// sendParam: {
// blocId:
// this.searchParam.blocMstrList.length > 0
// ? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
// : this.searchParam.blocId, //"BL0001",
// // readObjId: this.searchParam.readObj, // "MTT00001" // 전력 코드 고정
// readObjId: this.searchParam.searchReadObj, // "MTT00001" // 전력 코드 고정
useFg: '1',
readPlcNmLike: this.searchWord,
// useFg: '1',
// readPlcNmLike: this.searchWord,
// },
// });
const treeData = [
{
readPlcNm: '서울 본사',
name: '본사',
_children: [
{
readPlcNm: '서울 본사 - 1층',
name: '1층',
},
{
readPlcNm: '서울 본사 - 2층',
name: '2층',
},
],
},
});
{
readPlcNm: '부산 지사',
name: '지사',
_children: [
{
readPlcNm: '부산 지사 - A동',
name: 'A동',
_children: [
{
readPlcNm: '부산 지사 - A동 1층',
name: '1층',
},
{
readPlcNm: '부산 지사 - A동 2층',
name: '2층',
},
],
},
{
readPlcNm: '부산 지사 - B동',
name: 'B동',
},
],
},
{
readPlcNm: '대전 창고',
name: '창고',
},
];
// console.log("treeData", res)
// // console.log("treeData", res)
let myOptionsTree = {
treeColumnOptions: {
name: 'readPlcNm',
@ -360,32 +373,34 @@ export default {
// this.treeData = res;
// const ROOT = res[0].plcCd;
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'READ_PLC_ID',
value: res.map(item => ({
...item,
rowStat: null,
readPlcId: item.readPlcId,
readPlcIdNm: item.readPlcId,
upReadPlcId:
item.upReadPlcId == null || item.upReadPlcId == ''
? ''
: item.upReadPlcId,
upReadPlcNm:
item.upReadPlcNm == null || item.upReadPlcNm == ''
? ''
: item.upReadPlcNm,
blocId: item.blocId,
useFg: item.useFg === '1' ? true : false,
})),
});
// const setTreeData = await this.setTree({
// gridKey: this.gridNameTree,
// treeKey: 'READ_PLC_ID',
// value: res.map(item => ({
// ...item,
// rowStat: null,
// readPlcId: item.readPlcId,
// readPlcIdNm: item.readPlcId,
// upReadPlcId:
// item.upReadPlcId == null || item.upReadPlcId == ''
// ? ''
// : item.upReadPlcId,
// upReadPlcNm:
// item.upReadPlcNm == null || item.upReadPlcNm == ''
// ? ''
// : item.upReadPlcNm,
// blocId: item.blocId,
// useFg: item.useFg === '1' ? true : false,
// })),
// });
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT || [],
value: treeData,
});
this.loadGrid = true;
@ -520,9 +535,7 @@ const selectReadObjListTree = {
}
}
.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;
}
}
@ -532,17 +545,13 @@ const selectReadObjListTree = {
.v-dialog {
.v-card {
&__title {
color: map-deep-get($color, 'white', '0');
@if $theme == dark {
@if $theme ==dark {
background-color: #2d3355;
.v-btn {
background-color: #2d3355;
}
} @else {
background-color: #3f4d7d;
.v-btn {
background-color: #3f4d7d;
}
}
}
}