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

sk_fems_ui commit

Browse Source
This commit is contained in:
unknown
2025-07-12 15:13:46 +09:00
commit ffdf5ccb66
380 changed files with 137913 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/Logo.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<div class="VueToNuxtLogo">
<div class="Triangle Triangle--two" />
<div class="Triangle Triangle--one" />
<div class="Triangle Triangle--three" />
<div class="Triangle Triangle--four" />
</div>
</template>
<style>
.VueToNuxtLogo {
display: inline-block;
animation: turn 2s linear forwards 1s;
transform: rotateX(180deg);
position: relative;
overflow: hidden;
height: 180px;
width: 245px;
}
.Triangle {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
.Triangle--one {
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 180px solid #41b883;
}
.Triangle--two {
top: 30px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 87.5px solid transparent;
border-right: 87.5px solid transparent;
border-bottom: 150px solid #3b8070;
}
.Triangle--three {
top: 60px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid #35495e;
}
.Triangle--four {
top: 120px;
left: 70px;
animation: godown 0.5s linear forwards 3s;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 60px solid #fff;
}
@keyframes turn {
100% {
transform: rotateX(0deg);
}
}
@keyframes godown {
100% {
top: 180px;
}
}
@keyframes goright {
100% {
left: 70px;
}
}
</style>

209
components/Pagination.vue Normal file
View File

@ -0,0 +1,209 @@
<template>
<div class="ly-pager d-flex">
<v-row class="con-pager" align="center" justify="start">
<!-- <span class="grey--text">{{ $m('CAP.PAGE_ROW', '페이지 행당') }} : </span> -->
<v-menu offset-y>
<template #activator="{ on, attrs }">
<v-btn
dark
text
color="primary"
class="ml-2"
v-bind="attrs"
v-on="on"
>
{{ itemsPerPage }}
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list v-if="useLimit">
<v-list-item
v-for="(number, index) in itemsPerPageArray"
:key="index"
@click="changePageLeng(number)"
>
<v-list-item-title>{{ number }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-btn fab small class="mr-1 btn-pager" @click="firstToPage">
<v-icon>mdi-chevron-double-left</v-icon>
</v-btn>
<v-btn fab small class="mr-1 btn-pager" @click="prevPage">
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<!-- <span class="mr-4 grey--text mr-1"> {{ numberOfPages }} / {{ lastPage }} </span> -->
<span class="mr-4 mr-1"> {{ numberOfPages }} / {{ lastPage }} </span>
<v-btn fab small class="ml-1 btn-pager" @click="nextPage">
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
<v-btn fab small class="mr-1 btn-pager" @click="lastToPage">
<v-icon>mdi-chevron-double-right</v-icon>
</v-btn>
<div class="mr-1 btn-pager">
<v-text-field v-model="moveToPage" type="number" label="page" />
</div>
<v-btn fab small class="mr-1" @click="movePage">
{{ $m('CAP.MOVE', '이동') }}
</v-btn>
</v-row>
<slot name="btn"> </slot>
<!-- <Alert ref="alert" /> -->
</div>
</template>
<script>
export default {
props: {
useLimit: {
type: Boolean,
default: true,
},
totalCount: {
type: Number,
default: 0,
},
pageNum: {
type: Number,
default: 0,
},
limit: {
type: Number,
default: 0,
},
itemsPerPageArray: {
type: Array,
default: () => [20, 50, 100],
},
},
data() {
return {
moveToPage: '',
};
},
computed: {
page: function() {
return this.numberOfPages + '-' + this.lastPage;
},
lastPage: function() {
//grid data가 없을 경우 1 리턴
if (this.totalCount == 0) return 1;
let pageLength = Math.floor(this.totalCount / this.itemsPerPage);
if (this.totalCount % this.itemsPerPage > 0) {
pageLength++;
}
return pageLength;
},
itemsPerPage: function() {
return this.limit;
},
numberOfPages: function() {
return Number(this.pageNum);
},
plusPage: function() {
return Number(this.pageNum) + 1;
},
minusPage: function() {
return Number(this.pageNum) - 1;
},
},
watch: {
totalCount: function(newData) {
return (this.moveToPage = newData > 0 ? this.moveToPage : '');
},
moveToPage: function() {
return (this.moveToPage = this.moveToPage.replaceAll(/[^0-9]/g, ''));
},
},
methods: {
nextPage: function() {
if (this.lastPage >= this.plusPage) {
this.$emit('loadData', this.plusPage, this.itemsPerPage);
}
},
prevPage: function() {
if (0 != this.minusPage) {
this.$emit('loadData', this.minusPage, this.itemsPerPage);
}
},
movePage: function() {
if (0 < this.moveToPage && this.moveToPage <= this.lastPage) {
this.$emit('loadData', Number(this.moveToPage), this.itemsPerPage);
} else {
this.$refs.alert.done = () => {
this.$emit('refresh');
};
this.$refs.alert.open(
this.$m('COD.CNFM', '확인'),
this.$m('CAP.PAGE_MOVE_CNFM', '이동할 페이지 정보를 확인 하세요'),
);
}
},
changePageLeng: function(limit) {
//부모 컴포넌트에서 loadData(데이터 조회) 구현
//this.$emit('loadData', this.pageNum, limit);
// limit 변경 시 1 페이지로 초기화
this.$emit('loadData', 1, limit);
},
firstToPage: function() {
if (0 != this.minusPage) {
this.$emit('loadData', 1, this.itemsPerPage);
}
},
lastToPage: function() {
if (this.lastPage >= this.plusPage) {
this.$emit('loadData', this.lastPage, this.itemsPerPage);
}
},
},
};
</script>
<style lang="scss">
.btn-pager {
margin: 4px;
input {
width: 80px;
}
}
.v-btn--fab.v-size--small {
height: 30px;
width: 30px;
}
.v-text-field__details {
display: none;
}
.con-pager {
margin-top: 12px;
margin-bottom: -12px;
}
.ly-pager {
margin: auto;
}
.v-btn {
margin-left: 4px;
}
.v-btn--text {
margin-right: 6px;
}
// .grey--text {
// margin-left: 16px;
// }
.mr-4 {
margin-left: 14px;
}
.v-btn__content {
color: #ffffff;
}
</style>

7
components/README.md Normal file
View File

@ -0,0 +1,7 @@
# COMPONENTS
**This directory is not required, you can delete it if you don't want to use it.**
The components directory contains your Vue.js Components.
_Nuxt.js doesn't supercharge these components._

18
components/VuetifyLogo.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<img class="VuetifyLogo" alt="Vuetify Logo" src="/vuetify-logo.svg" />
</template>
<style>
.VuetifyLogo {
height: 180px;
width: 180px;
transform: rotateY(560deg);
animation: turn 3.5s ease-out forwards 1s;
}
@keyframes turn {
100% {
transform: rotateY(0deg);
}
}
</style>

181
components/common/AdminMenu.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<v-menu offset-y nudge-bottom="8" :left="true">
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
depressed
:ripple="false"
:class="{ miniVariant }"
:style="btnStyle"
>
<v-icon size="32" :class="{ 'mr-2': !miniVariant }"
>$icoAdminMenu</v-icon
>
<span class="body-1 mr-1">{{ userNm }}</span>
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
<!-- <AlertPopup
ref="alertPop"
v-show='false'
:item="item"
/> -->
</template>
<v-list class="pa-2">
<!-- <v-list-item class="mb-1">-->
<!-- <div class="d-flex align-center">-->
<!-- <v-avatar class="mr-1" size="20">-->
<!-- <v-icon color="white">mdi-account-outline</v-icon>-->
<!-- </v-avatar>-->
<!-- <div class="d-flex flex-column">-->
<!-- <span class="body-2 white&#45;&#45;text">관리자</span>-->
<!-- &lt;!&ndash; <nuxt-link class="d-flex align-center mypage" to="/">-->
<!-- <span class="clr-ccc-aaa">마이페이지</span>-->
<!-- <v-icon class="ico-right">mdi-chevron-right</v-icon>-->
<!-- </nuxt-link> &ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- </v-list-item>-->
<v-list-item>
<v-btn @click="pswdChange" small elevation="0">
<v-icon class="mr-1" size="20">mdi-account-outline</v-icon>
<span class="body-2">비밀번호 변경</span>
</v-btn>
</v-list-item>
<v-list-item>
<v-btn @click="logout" small elevation="0">
<v-icon class="mr-1" size="20">mdi-logout</v-icon>
<span class="body-2">로그아웃</span>
</v-btn>
</v-list-item>
</v-list>
</v-menu>
</template>
<script>
import $cookie from 'vue-cookie';
import { mapState } from 'vuex';
// import AlertPopup from "~/components/common/modal/AlertPopup";
export default {
props: {
miniVariant: Boolean,
userNm: {
type: String,
require: true,
},
comId: {
type: String,
require: true,
},
},
components: {
// AlertPopup
//ChangePswdPop
},
data() {
return {
logoutUrl: '/login',
item: {},
};
},
computed: {
...mapState(['isDarkMode']),
btnStyle() {
return this.isDarkMode ? { color: '#fff' } : { color: '#111' };
},
},
methods: {
logout() {
$cookie.delete('FEMS_SESSION');
// alert("정상적으로 로그아웃 되었습니다.");
// this.item={
// label:'로그아웃',
// message:'정상적으로 로그아웃 되었습니다.'
// }
// this.$refs['alertPop'].dialog = true;
this.$nextTick(() => {
window.location.href = this.logoutUrl + '?' + this.comId;
});
},
pswdChange() {
this.$parent.$parent.$parent.$parent.$refs['changePswdPop'].dialog = true;
},
},
mounted() {},
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/var.scss';
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.mdi-account {
color: map-deep-get(
$config,
#{$theme},
'tui-datepicker-calendar-color'
) !important;
}
.v-list {
background-color: map-deep-get(
$config,
#{$theme},
'admin-menu-expanded-list-backgroundColor'
);
border-color: transparent;
}
}
}
.v-menu__content {
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
}
.v-list {
.v-btn {
padding: 0 !important;
margin-bottom: 0;
color: #fff;
&:hover {
color: #46c0ff;
}
> span {
color: currentColor;
}
}
}
.v-btn {
width: 100%;
min-width: auto !important;
display: flex;
align-items: center;
padding: 0 20px !important;
margin-bottom: 12px;
&,
&:before {
background-color: transparent !important;
}
::v-deep {
.v-btn__content {
justify-content: flex-start;
}
}
&.miniVariant {
::v-deep {
.v-btn__content > .body-1,
.v-btn__content > .mdi-chevron-down {
display: none;
}
}
}
}
</style>

77
components/common/BtnXlsx.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div id="btnExeclDownload">
<v-btn class="v-btn__round v-btn__excel" @click="downloadExcelFile">
<v-icon>mdi-microsoft-excel</v-icon>
엑셀
</v-btn>
</div>
</template>
<script>
import XLSX from 'xlsx';
export default {
name: 'btnExeclDownload',
props: {
xlsHeader: {
// JSON 데이터로 만들 시 필요
type: Array,
default: [],
},
xlsRowData: {
// JSON 데이터로 만들 시 필요
type: Array,
default: [],
},
tableId: {
// 성성된 테이블 그대로 쓸 경우 그리드에 id 지정 후 바인딩
type: String,
default: null,
},
fileName: {
// 테이블이 하나일 경우, 현재 활성화 메뉴명을 가져와도 될듯,.
type: String,
required: true,
},
sheetName: {
// 지정된 시트명이 없으면 'Sheet1'
type: String,
default: null,
},
},
data() {
return {
xlsData: [],
};
},
methods: {
setExcelData() {
let tmpData = [];
let tmpMap = {};
this.xlsRowData.map(item => {
this.xlsHeader.map(v => {
return Object.assign(tmpMap, { [v.header]: item[v.name] || '' });
});
tmpData = tmpData.concat(tmpMap);
tmpMap = {};
});
this.xlsData = tmpData;
tmpData = null;
tmpMap = null;
},
async downloadExcelFile() {
if (!this.tableId) await this.setExcelData(); // 들어온 JSON 데이타 가공
const workBook = XLSX.utils.book_new(); // 새 시트 생성
const excelData = this.tableId
? // 테이블 그대로 가져올때
XLSX.utils.table_to_sheet(document.getElementById(this.tableId))
: // JSON 형식으로 가져올때
XLSX.utils.json_to_sheet(this.xlsData);
const sheetName = this.sheetName || null;
XLSX.utils.book_append_sheet(workBook, excelData, sheetName); // 시트 명명, 데이터 지정
XLSX.writeFile(workBook, `${this.fileName}.xlsx`); // 엑셀파일 만듬
},
},
};
</script>

339
components/common/Calendar.vue Normal file
View File

@ -0,0 +1,339 @@
<template>
<div class="custom-vc-calender">
<div class="custom-vc-calender-title text-center" v-if="headerVisible">
<span>{{ selectedYear }}년 {{ selectedMonth }}월</span>
</div>
<vc-calendar
ref="myCalendar"
:attributes="calendarAttributes"
class="custom-calendar"
>
<!-- disable-page-swipe
is-expanded -->
<template v-slot:day-content="{ day, attributes }">
<div class="plusButton" style="overflow:auto">
<!-- <p class="plusButton mr-1" >+</p> -->
<span
:class="['day-label', { 'is-holiday': hldyValues(day.day) }]"
@click="addPlan(day.year, day.month, day.day)"
>{{ day.day }}</span
>
<span v-for="attr in attributes" :key="attr.key" class="day-hldyNm">
{{ attr.customData.title }}
</span>
<div class="">
<p
v-for="attr in attributes"
:key="attr.key"
:class="attr.customData.planColor"
@click="updatePlan(attr.customData.planSeq)"
>
{{ attr.customData.planTitle }}
</p>
</div>
</div>
</template>
</vc-calendar>
<component
ref="planPop"
:is="'PlanPop'"
v-show="false"
:detailList="detailList"
:label="planLabel"
:parentPrgmId="parentPrgmId"
/>
</div>
</template>
<script>
import { mapState } from 'vuex';
import Utility from '~/plugins/utility';
import PlanPop from '@/components/common/modal/PlanPop';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
gridName: {
type: String,
require: true,
},
headerVisible: {
type: Boolean,
default: true,
},
},
computed: {
...mapState({
pageData(state) {
return state.pageData[this.parentPrgmId];
},
}),
gridData() {
return this.pageData[this.gridName].data;
},
planData() {
return this.pageData.planData;
},
calendarDtValue() {
const dt = this.pageData['fromDt'];
return dt;
},
selectedYear() {
return Utility.setFormatDate(this.calendarDtValue, 'YYYY');
//return this.calendarDtValue.split("-")[0];
},
selectedMonth() {
return Utility.setFormatDate(this.calendarDtValue, 'MM');
//return this.calendarDtValue.split("-")[1];
},
hldyValues() {
const filter = this.gridData.filter(
data => data.hldyFg === '1' || data.hldyNm,
);
const map = filter.map(item => {
const dt = item.dt.split(' ')[0];
const dtArr = dt.split('-');
const dd = dtArr[2] * 1;
return dd;
});
return day => {
return map.includes(day);
};
},
calendarAttributes() {
if (this.planData.length > 0) {
let attrArr = [];
this.planData.forEach((item, idx) => {
const dt = item.dt.split(' ')[0];
const dtArr = dt.split('-');
const yy = dtArr[0] * 1;
const mm = dtArr[1] * 1 - 1;
const dd = dtArr[2] * 1;
attrArr.push({
key: idx,
customData: {
title: item.hldyNm,
hldyFg: item.hldyFg,
planTitle: item.planTitle,
planSeq: item.planSeq,
planColor:
// item.endDt < Utility.setFormatDate(new Date(), 'YYYY-MM-DD')
// ? 'grey':
item.planColor,
},
dates: new Date(yy, mm, dd),
});
});
return attrArr;
} else {
return [];
}
},
},
watch: {
calendarDtValue(val) {
// if (val) {
// this.$refs.myCalendar.move(this.calendarDtValue);
// }
if (val) {
const yy = Utility.setFormatDate(this.calendarDtValue, 'YYYY');
const mm = Utility.setFormatDate(this.calendarDtValue, 'MM') - 1;
this.$refs.myCalendar.showPageRange(new Date(yy, mm, 1));
}
},
},
components: {
PlanPop,
},
data() {
return {
detailList: myDetail,
planPopDisableFlag: false,
planLabel: '일정',
};
},
methods: {
addPlan(year, month, day) {
this.planLabel = '일정 등록';
this.$refs['planPop'].popUpAction = 'insert';
// this.$refs['planPop'].strtDt = year + '-' + month + '-' + day;
// this.$refs['planPop'].endDt = year + '-' + month + '-' + day;
// this.$refs['planPop'].strtDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
// this.$refs['planPop'].endDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
this.$refs['planPop'].strtDt = '';
this.$refs['planPop'].endDt = '';
this.$refs['planPop'].addPlanData = {
year : year,
month : month,
day : day
}
this.$refs['planPop'].blocId = this.pageData.blocMstrList[
this.pageData.blocId
].blocId;
this.$refs['planPop'].dialog = true;
},
updatePlan(val) {
this.$refs['planPop'].popUpAction = 'update';
this.$refs['planPop'].planSeq = val;
this.$refs['planPop'].strtDt = '';
this.$refs['planPop'].endDt = '';
this.$refs['planPop'].blocId = this.pageData.blocMstrList[
this.pageData.blocId
].blocId;
this.$refs['planPop'].dialog = true;
},
},
mounted() {},
};
const myDetail = [];
</script>
<style lang="scss" scoped>
@import '@/assets/scss/var.scss';
@import '@/assets/scss/mixin.scss';
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-track {
display: none;
}
.custom-vc-calender {
&-title {
margin-bottom: 20px;
}
}
::v-deep {
.custom-calendar.vc-container {
width: 100%;
background-color: transparent;
border: 0;
}
.vc-header,
.vc-arrows-container {
display: none;
}
.vc-weeks {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0;
> div {
flex: 1 0 calc(100% / 7);
}
}
.vc-weekday {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0;
}
.vc-day {
height: 10.889vh;
min-height: auto;
.day-label {
font-size: 1rem;
line-height: 1.235;
}
.day-hldyNm {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
max-width: 80%;
float: right;
font-size: 10pt;
}
> div {
position: relative;
height: 100%;
padding: 10px;
border-radius: 0 !important;
}
}
.vc-day.is-not-in-month {
* {
opacity: 1 !important;
}
}
.plusButton:hover > span:first-child {
font-weight: bolder;
cursor: pointer;
}
.red {
//background-color: rgba(229,62,62,var(--bg-opacity));
background-color: #e53e3e !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1.25;
text-align: left;
margin-bottom: 0.25rem;
}
.blue {
//background-color: rgba(66,153,225,var(--bg-opacity));
background-color: #4299e1 !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1.25;
text-align: left;
margin-bottom: 0.25rem;
}
.puple {
//background-color: rgba(102,126,234,var(--bg-opacity));
background-color: #667eea !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1.25;
text-align: left;
margin-bottom: 0.25rem;
}
.green {
//background-color: rgba(56,178,172,var(--bg-opacity));
background-color: #38b2ac !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1.25;
text-align: left;
margin-bottom: 0.25rem;
width: 90%;
}
.orange {
//background-color: rgba(237,137,54,var(--bg-opacity));
background-color: #ed8936 !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1.25;
text-align: left;
margin-bottom: 0.25rem;
}
.pink {
//background-color: rgba(237,100,166,var(--bg-opacity));
background-color: #ed64a6 !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1.25;
text-align: left;
margin-bottom: 0.25rem;
}
.grey {
background-color: #6d6d6d;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1.25;
text-align: left;
margin-bottom: 0.25rem;
}
}
</style>

409
components/common/Chart.vue Normal file
View File

@ -0,0 +1,409 @@
<template>
<div class="chart-wrap">
<v-chart
class="chart"
:option="chartOption"
ref="VChart"
@click="onClick"
@dblclick="onDblClick"
@click.right="onRightClick"
@legendselectchanged="onLegendSelectChanged"
autoresize
/>
</div>
</template>
<script>
import VChart from 'vue-echarts';
import { mapState } from 'vuex';
export default {
components: {
VChart,
},
props: {
parentPrgmId: {
type: String,
require: true,
},
widgetId: {
type: String,
require: true,
},
widgetData: {
type: String,
require: true,
},
modalId: {
type: String,
require: true,
},
modalDataKey: {
type: String,
require: true,
},
chartName: {
type: String,
require: true,
},
chartColor: {
type: String,
require: true,
},
},
data() {
return {
legendSeletedList: {},
};
},
computed: {
...mapState({
isDarkMode: 'isDarkMode',
chartOption(state) {
var dark_Col = [
'#01AE6A',
'#FFB046',
'#F6637B',
'#944FE9',
'#4385E3',
'#00AA8C',
'#FF8808',
'#EA5E9A',
'#B742D9',
'#6363DA',
'#79B100',
'#D66500',
'#DC5ABC',
'#764FD7',
'#009DD1',
'#3BAD43',
'#D75E3D',
'#CF4DCA',
'#A148D9',
'#5972DF',
];
var darkCol_1_5 = [
'#01AE6A',
'#089362',
'#0F7959',
'#165E51',
'#19514D',
];
var darkCol_1_10 = [
'#01AE6A',
'#04A166',
'#089362',
'#0B865D',
'#0F7959',
'#126C55',
'#165E51',
'#19514D',
'#1D4448',
'#1F3D46',
];
var darkCol_2_5 = [
'#FFB046',
'#D39545',
'#A77A44',
'#7C5F42',
'#665242',
];
var darkCol_2_10 = [
'#FFB046',
'#EAA345',
'#D39545',
'#BE8844',
'#A77A44',
'#926D43',
'#7C5F42',
'#665242',
'#4C4141',
'#453D41',
];
var darkCol_3_5 = [
'#F6637B',
'#CC576F',
'#A24C63',
'#784058',
'#633B52',
];
var darkCol_3_10 = [
'#F6637B',
'#E15D75',
'#CC576F',
'#B75269',
'#A24C63',
'#8D465E',
'#784058',
'#633B52',
'#4E354C',
'#433249',
];
var darkCol_4_5 = [
'#944FE9',
'#7E47C7',
'#6740A5',
'#513884',
'#463473',
];
var darkCol_4_10 = [
'#944FE9',
'#894BD8',
'#7E47C7',
'#7344B7',
'#6740A5',
'#5C3C95',
'#513884',
'#463473',
'#3A3162',
'#352F59',
];
var darkCol_5_5 = [
'#4385E3',
'#3D73C2',
'#3760A2',
'#304E81',
'#2D4571',
];
var darkCol_5_10 = [
'#4385E3',
'#407CD3',
'#3D73C2',
'#3A6AB2',
'#3760A2',
'#345792',
'#304E81',
'#2D4571',
'#2A3B61',
'#293758',
];
var darkCol_dashGauge = [
[0.125, '#009245'],
[0.25, '#39b54a'],
[0.375, '#d9e021'],
[0.5, '#fcee21'],
[0.625, '#fbb03b'],
[0.75, '#f7931e'],
[0.875, '#f15a24'],
[1.0, '#ed1c24'],
];
var darkCol_dashUseStatus = ['#2fad35', '#fb8200', '#fb5a8b'];
var darkCol_dashTodayUsageCost = ['#01ae6a', '#ffb046', '#f6637b'];
var darkCol_dashEnrgUsage = ['#01ae6a', '#4385e3'];
var darkCol_dashReadplcStatus = ['#01ae6a', '#ffb046', '#f6637b'];
var lightCol_dashReadplcStatus = ['#3cc380', '#ffb13b', '#f98694'];
var light_Col = [
'#3CC380',
'#FFB13B',
'#F98694',
'#CF74E5',
'#6A9BF4',
'#29BCA2',
'#EC8D3B',
'#FC749D',
'#CF74E5',
'#7E84FF',
'#83BE01',
'#D58B03',
'#FF7E71',
'#BE6DF0',
'#3FAED2',
'#5DBF63',
'#D1886C',
'#ED71B7',
'#977EE6',
'#7A8EE2',
];
var lightCol_1_5 = [
'#3CC380',
'#5BCD94',
'#7BD6A9',
'#99E0BD',
'#B1E7CC',
];
var lightCol_1_10 = [
'#3CC380',
'#4BC88A',
'#5BCD94',
'#6BD19E',
'#7BD6A9',
'#8ADBB3',
'#99E0BD',
'#A9E5C7',
'#B9E9D1',
'#C9EEDC',
];
var lightCol_2_5 = [
'#FFB13B',
'#FFBE5B',
'#FFCA7A',
'#FFD699',
'#FFE0B1',
];
var lightCol_2_10 = [
'#FFB13B',
'#FFB74A',
'#FFBE5B',
'#FFC46A',
'#FFCA7A',
'#FFD089',
'#FFD699',
'#FFDDA9',
'#FFE3B8',
'#FFE9C8',
];
var lightCol_3_5 = [
'#F98694',
'#FA99A5',
'#FBADB6',
'#FCC0C7',
'#FDCFD4',
];
var lightCol_3_10 = [
'#F98694',
'#F98F9C',
'#FA99A5',
'#FAA3AE',
'#FBADB6',
'#FBB6BF',
'#FCC0C7',
'#FCCAD0',
'#FDD3D8',
'#FDDDE1',
];
var lightCol_4_5 = [
'#CF74E5',
'#D78AE9',
'#DEA1ED',
'#E6B7F1',
'#ECC7F5',
];
var lightCol_4_10 = [
'#CF74E5',
'#D37FE7',
'#D78AE9',
'#DA95EB',
'#DEA1ED',
'#E2ACEF',
'#E6B7F1',
'#EAC2F4',
'#EECDF6',
'#F2D8F8',
];
var lightCol_5_5 = [
'#6A9BF4',
'#82ABF6',
'#9ABBF8',
'#B1CBF9',
'#C3D7FB',
];
var lightCol_5_10 = [
'#6A9BF4',
'#76A3F5',
'#82ABF6',
'#8EB3F7',
'#9ABBF8',
'#A6C3F8',
'#B1CBF9',
'#BED3FA',
'#C9DBFB',
'#D6E3FC',
];
var lightCol_dashGauge = [
[0.125, '#58c06f'],
[0.25, '#7cd574'],
[0.375, '#fbe462'],
[0.5, '#ffd771'],
[0.625, '#ffad7f'],
[0.75, '#ff966e'],
[0.875, '#ff706e'],
[1.0, '#ff6689'],
];
var lightCol_dashUseStatus = ['#00c875', '#fdab3d', '#ff7b8b'];
var lightCol_dashTodayUsageCost = ['#3cc380', '#cf74e5', '#ffb13b'];
var lightCol_dashEnrgUsage = ['#ce83e0', '#78a3f3'];
var lightCol_dashReadplcStatus = ['#3cc380', '#ffb13b', '#f98694'];
var tmpChrtOp;
if (this.widgetId || this.widgetData) {
tmpChrtOp =
state.pageData[this.parentPrgmId][this.widgetId][this.widgetData][
this.chartName
];
} else if(this.modalId || this.modalDataKey) {
tmpChrtOp =
state.pageData[this.parentPrgmId][this.modalId][this.modalDataKey][this.chartName];
} else {
tmpChrtOp = state.pageData[this.parentPrgmId][this.chartName];
}
if (this.chartColor != undefined) {
if (this.isDarkMode) {
tmpChrtOp.color = eval('darkCol_' + this.chartColor);
} else {
tmpChrtOp.color = eval('lightCol_' + this.chartColor);
}
} else {
if (this.isDarkMode) {
tmpChrtOp.color = dark_Col;
} else {
tmpChrtOp.color = light_Col;
}
}
return tmpChrtOp;
},
}),
},
methods: {
onClick(event, instance, ECharts) {
console.log('onClick : ', event);
this.$emit('click', event);
},
onDblClick(event, instance, ECharts) {
console.log('onDblClick : ', event);
this.$emit('dblclick', event);
},
onRightClick(event, instance, ECharts) {
console.log('onRightClick : ', event);
this.$emit('rclick', event);
},
onLegendSelect(params) {
const myChart = this.$refs.VChart;
for (const key of params) {
//차트 instance에 'legendSelect' action 전달
myChart.dispatchAction({
type: 'legendSelect',
name: key,
});
}
},
onLegendUnSelect(params) {
const myChart = this.$refs.VChart;
for (const key of params) {
//차트 instance에 'legendUnSelect' action 전달
myChart.dispatchAction({
type: 'legendUnSelect',
name: key,
});
}
},
onLegendSelectChanged(params) {
const obj = params.selected;
this.legendSeletedList = obj;
},
onGetChangedLegendSeletedList() {
return this.legendSeletedList;
},
onGetLegendSelectedList() {
const myChart = this.$refs.VChart;
return myChart.getOption().legend[0].selected;
},
clear() {
const myChart = this.$refs.VChart;
myChart.clear();
},
},
};
</script>

103
components/common/CheckBox.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-checkbox
v-model="chkValue"
:disabled="disabledFlag"
:readonly="readonly || false"
:required="required || false"
:false-value="false"
:color="isDarkMode ? '#fff' : '#4777d9'"
@change="modifyValue"
></v-checkbox>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: true,
},
isDarkMode: {
type: Boolean,
require: false,
default: false,
},
required: {
type: Boolean,
require: false,
default: false,
},
readonly: {
type: Boolean,
require: false,
default: false,
},
valueNm: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {
chkValue: false,
testData: false,
disabledFlag: false,
};
},
computed: {
...mapState({
searchParam: state => state.pageData,
myBindingDara(state) {
return state.pageData[this.parentPrgmId][this.valueNm];
},
}),
},
watch: {
myBindingDara: {
deep: true,
handler(val) {
this.chkValue = val;
},
},
},
created() {
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
modifyValue(e) {
return this.setPageData({ [this.valueNm]: e });
},
},
};
</script>
<style></style>

145
components/common/CheckBoxLabelChange.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="location == 'front'" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</v-col>
<v-col :cols="textCols" @click="modifyValue">
<v-checkbox
v-model="chkValue"
:disabled="disabledFlag"
:readonly="readonly || false"
:required="required || false"
:false-value="false"
:color="isDarkMode ? '#fff' : '#4777d9'"
@change="modifyValue"
></v-checkbox>
</v-col>
<v-col v-if="location == 'rear'" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
},
isDarkMode: {
type: Boolean,
require: false,
default: false,
},
required: {
type: Boolean,
require: false,
default: false,
},
readonly: {
type: Boolean,
require: false,
default: false,
},
valueNm: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
icon: {
type: Boolean,
require: false,
default: true,
},
location: {
type: String,
require: false,
default: 'front'
},
disabledCheckOption: {
type: String,
require: false
}
},
data() {
return {
chkValue: false,
testData: false,
disabledFlag: false,
};
},
computed: {
...mapState({
searchParam: state => state.pageData,
myBindingData(state) {
return state.pageData[this.parentPrgmId][this.valueNm];
},
bindingDisabledCheckOption(state) {
if(state.pageData[this.parentPrgmId][this.disabledCheckOption]!=undefined){
return state.pageData[this.parentPrgmId][this.disabledCheckOption];
}
}
}),
},
watch: {
myBindingData: {
deep: true,
handler(val) {
this.chkValue = val;
},
},
bindingDisabledCheckOption(val) {
this.disabledFlag = val;
}
},
created() {
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
if(this.searchParam[this.parentPrgmId][this.disabledCheckOption]!=undefined){
this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption]
}
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
modifyValue(e) {
if(this.disabledFlag==true&&e.target != undefined){
alert('기간이 한 시간 이내일 경우만 선택할 수 있습니다.')
}else{
if(e.target == undefined){
return this.setPageData({ [this.valueNm]: e });
}
}
},
},
};
</script>
<style></style>

98
components/common/CommonRadio.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<!-- <v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col> -->
<v-radio-group
v-model="selected"
required:rules="radioRules"
row
hide-details
dense
>
<v-radio
v-for="item in radioList"
:key="item.label"
:label="item.label"
:value="item.value"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
</v-radio-group>
<!-- @change="updateBlocCode($event)" -->
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
radioList: {
type: Array,
require: true,
},
radioValue: {
type: String,
require: false,
default: 'commRadio',
},
},
data() {
return {
labelPrepend: true,
// selected:"CYC_DAY"
};
},
computed: {
...mapState({
isDarkMode: 'isDarkMode',
searchParam: state => state.pageData,
}),
selected: {
get() {
return this.searchParam[this.parentPrgmId][this.radioValue];
},
set(value) {
return this.setPageData({ [this.radioValue]: value });
},
},
},
watch: {
selected(value) {
// 주기에 따른 오늘 기준 기본 날짜 세팅
this.setDefaultDate(value);
},
},
created() {
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
},
async mounted() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({}),
setDefaultDate(value) {
this.setPageData({ [this.radioValue]: value });
},
},
};
</script>
<style></style>

442
components/common/Datepicker.vue Normal file
View File

@ -0,0 +1,442 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</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">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</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
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
</template>
</v-text-field>
</div>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import TuiDatepicker from 'tui-date-picker';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
},
timePicker: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
required: {
type: Boolean,
require: false,
default: false,
},
isRangeOption:{
type:Boolean,
require:false,
default: true
}
},
data() {
return {
today: new Date(),
startDatepickerInstance: null,
endDatepickerInstance: null,
startDtValue: null,
endDtValue: null,
cmCycleFlag: false,
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
myCmCycle() {
return this.searchParam.cmCycle;
},
myOptions() {
let returnObj = {};
switch (this.myCmCycle) {
case 'CYC_YEAR':
returnObj = {
type: 'year',
viewFormat: 'YYYY',
pickerFormat: 'YYYY',
sendFormat: 'YYYY',
};
break;
case 'CYC_MONTH':
returnObj = {
type: 'month',
viewFormat: 'YYYY-MM',
pickerFormat: 'YYYY-MM',
sendFormat: 'YYYYMM',
};
break;
case 'CYC_DAY':
returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD',
pickerFormat: 'yyyy-MM-dd',
sendFormat: 'YYYYMMDD',
};
break;
case 'CYC_HOUR':
returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD' + (this.timePicker ? ' HH:mm:ss' : ''),
pickerFormat: 'yyyy-MM-dd' + (this.timePicker ? ' HH:mm A' : ''),
sendFormat: this.timePicker ? 'YYYY-MM-DD HH:mm:ss' : 'YYYYMMDD',
};
// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
break;
default:
break;
}
return returnObj;
},
// maxDate() {
// return Utility.setFormatDate("today", this.myOptions.format);
// },
fromDtValue() {
return Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
);
},
toDtValue() {
return Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
);
},
toDtChange(){
return {
isCheck:this.searchParam.isCheck ,
toDt : Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
)};
},
fromDtChange(){
return {
isCheck:this.searchParam.isCheck ,
fromDt : Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
)};
},
defaultRange() {
return this.searchParam.defaultRange
? this.searchParam.defaultRange[this.myCmCycle]
: null;
},
isRange() {
return (
(this.defaultRange !== null && this.defaultRange > 0 && this.isRangeOption) ||
this.defaultRange === 'no limite'
);
},
},
watch: {
myCmCycle() {
this.cmCycleFlag = false;
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
this.startDatepickerInstance.setType(this.myOptions.type);
this.endDatepickerInstance.setType(this.myOptions.type);
},
fromDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.toDtValueChkRang(newVal);
this.startDatepickerInstance.setDate(new Date(newVal));
} else {
this.setPageData({ isFind: true });
}
},
toDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.fromDtValueChkRang(newVal);
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
fromDtChange:{
deep:true,
handler(){
if(this.fromDtChange.isCheck){
this.fromDtChanged(this.fromDtChange.fromDt);
this.setPageData({
isCheck : false
})
}
}
},
toDtChange:{
deep:true,
handler(){
if(this.toDtChange.isCheck){
this.toDtChanged(this.toDtChange.toDt);
this.setPageData({
isCheck : false
})
}
}
}
},
created() {
if (this.timePicker) {
this.setPageData({
fromDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 00:00:00',
toDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 23:59:59',
});
}
},
mounted() {
const startContainer = document.getElementById('startpicker-container');
const startTarget = document.getElementById('startpicker');
const endContainer = document.getElementById('endpicker-container');
const endTarget = document.getElementById('endpicker');
// datepicker 생성
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: startTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성
this.endDatepickerInstance = new TuiDatepicker(endContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: endTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성 끝
// datepicker 초기값 생성
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
// datepicker 초기값 생성 끝
// datepicker 변경시 이벤트 추가
this.startDatepickerInstance.on('change', () => this.getStartDt());
this.endDatepickerInstance.on('change', () => this.getEndDt());
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
getStartDt() {
const dt = this.startDatepickerInstance.getDate();
this.setPageData({
fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
getEndDt() {
const dt = this.endDatepickerInstance.getDate();
this.setPageData({
toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
toDtChanged(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.fromDtValueChkRang(newVal);
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
fromDtChanged(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.toDtValueChkRang(newVal);
this.startDatepickerInstance.setDate(new Date(newVal));
} else {
this.setPageData({ isFind: true });
}
},
fromDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.fromDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = compareDt.diff(defaultDt, rangeKey);
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
// }
// this.cmCycleFlag = true;
} else {
this.setPageData({
fromDt: Utility.setBeforetDate(
this.searchParam,
compareDt,
this.myOptions.sendFormat,
),
});
}
},
toDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.toDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = defaultDt.diff(compareDt, rangeKey);
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
this.setPageData({
toDt: Utility.setAftertDate(
this.searchParam,
compareDt,
this.myOptions.sendFormat,
),
});
}
},
},
};
</script>
<style lang="scss" scoped>
.datepicker-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#startpicker-container,
#endpicker-container {
width: 100%;
position: absolute;
top: 36px;
left: 0;
}
}
}
}
.v-input__custom {
flex: 0 0 auto;
&.half {
width: calc(50% - 20px);
}
}
::v-deep {
.tui-timepicker-row {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}
}
}
</style>

525
components/common/DatepickerTimeSelectBox.vue Normal file
View File

@ -0,0 +1,525 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<div class="datepicker-container">
<v-text-field
id="startpicker"
ref="startpicker"
v-model="fromDtValue"
:class="(isRange && !selectBoxTimeItemList.selectTimeValue1) ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<component
v-if="selectBoxTimeItemList.selectTimeValue1"
:parentPrgmId="parentPrgmId"
:is="'SelectBoxTime'"
ref="SelectBox1"
:propsValue="selectTimeValue1"
:itemList="selectTimeValueList1"
:minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1"
@update:propsValue="selectTimeValue1 = $event"
/>
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
<v-text-field
v-show="isRange"
id="endpicker"
ref="endpicker"
v-model="toDtValue"
:class="(isRange && !selectBoxTimeItemList.selectTimeValue2) ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
</template>
</v-text-field>
<component
v-if="selectBoxTimeItemList.selectTimeValue2"
:parentPrgmId="parentPrgmId"
:is="'SelectBoxTime'"
ref="SelectBox2"
:propsValue="selectTimeValue2"
:itemList="selectTimeValueList2"
:minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1"
@update:propsValue="selectTimeValue2 = $event"
/>
</div>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import TuiDatepicker from 'tui-date-picker';
import Utility from '~/plugins/utility';
import SelectBoxTime from '@/components/common/select/SelectBoxTime';
import DateUtility from '~/plugins/dateUtility'
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
},
timePicker: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
required: {
type: Boolean,
require: false,
default: false,
},
isRangeOption:{
type:Boolean,
require:false,
default: true
},
selectBoxTimeItemList: {
type: Object,
require: false,
default: () => {
return {};
}
},
selectFromDtUntilTodayFg: {
type:Boolean,
require:false,
default: false
},
selectToDtUntilTodayFg: {
type:Boolean,
require:false,
default: false
},
},
components: {
SelectBoxTime
},
data() {
return {
today: new Date(),
startDatepickerInstance: null,
endDatepickerInstance: null,
startDtValue: null,
endDtValue: null,
fromDtOldVal: null,
toDtOldVal: null,
cmCycleFlag: false,
selectTimeValue1: this.selectBoxTimeItemList.selectTimeValue1 != undefined ? this.selectBoxTimeItemList.selectTimeValue1 : null, // selectBoxTime에 필요한 prop
selectTimeValueList1: this.selectBoxTimeItemList.selectTimeValueList1 != undefined ? this.selectBoxTimeItemList.selectTimeValueList1 : [], // selectBoxTime에 필요한 prop
selectTimeValue2: this.selectBoxTimeItemList.selectTimeValue2 != undefined ? this.selectBoxTimeItemList.selectTimeValue2 : null, // selectBoxTime에 필요한 prop
selectTimeValueList2: this.selectBoxTimeItemList.selectTimeValueList2 != undefined ? this.selectBoxTimeItemList.selectTimeValueList2 : [], // selectBoxTime에 필요한 prop
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
myCmCycle() {
return this.searchParam.cmCycle;
},
myOptions() {
let returnObj = {};
switch (this.myCmCycle) {
case 'CYC_YEAR':
returnObj = {
type: 'year',
viewFormat: 'YYYY',
pickerFormat: 'YYYY',
sendFormat: 'YYYY',
};
break;
case 'CYC_MONTH':
returnObj = {
type: 'month',
viewFormat: 'YYYY-MM',
pickerFormat: 'YYYY-MM',
sendFormat: 'YYYYMM',
};
break;
case 'CYC_DAY':
returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD',
pickerFormat: 'yyyy-MM-dd',
sendFormat: 'YYYYMMDD',
};
break;
case 'CYC_HOUR':
returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD' + (this.timePicker ? ' HH:mm:ss' : ''),
pickerFormat: 'yyyy-MM-dd' + (this.timePicker ? ' HH:mm A' : ''),
sendFormat: this.timePicker ? 'YYYY-MM-DD HH:mm:ss' : 'YYYYMMDD',
};
// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
break;
default:
break;
}
return returnObj;
},
// maxDate() {
// return Utility.setFormatDate("today", this.myOptions.format);
// },
fromDtValue(val) {
let selectVal = Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
);
if(this.selectFromDtUntilTodayFg){
let today = Utility.setFormatDate(new Date(), "YYYY-MM-DD");
let dayDiff = DateUtility.diff(selectVal,today,'days');
if(dayDiff < 0){
alert('오늘 날짜까지 검색이 가능합니다.');
selectVal = today;
if(this.fromDtOldVal == today){
this.toDtValueChkRang(selectVal);
this.startDatepickerInstance.setDate(new Date(selectVal));
}
}
}
if(this.fromDtOldVal == null){
this.fromDtOldVal = selectVal;
}
return selectVal;
// console.log('fromDtValue!!!',);
// return Utility.setFormatDate(
// this.searchParam.fromDt,
// this.myOptions.viewFormat,
// );
},
toDtValue() {
let selectVal = Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
);
if(this.selectToDtUntilTodayFg){
let today = Utility.setFormatDate(new Date(), "YYYY-MM-DD");
let dayDiff = DateUtility.diff(selectVal,today,'days');
if(dayDiff < 0){
alert('오늘 날짜까지 검색이 가능합니다.');
selectVal = today;
if(this.toDtOldVal == today){
this.fromDtValueChkRang(selectVal);
this.endDatepickerInstance.setDate(new Date(selectVal));
}
}
}
if(this.toDtOldVal == null){
this.toDtOldVal = selectVal;
}
return selectVal;
// return Utility.setFormatDate(
// this.searchParam.toDt,
// this.myOptions.viewFormat,
// );
},
defaultRange() {
return this.searchParam.defaultRange
? this.searchParam.defaultRange[this.myCmCycle]
: null;
},
isRange() {
return (
(this.defaultRange !== null && this.defaultRange > 0 && this.isRangeOption) ||
this.defaultRange === 'no limite'
);
},
},
watch: {
selectTimeValue1(val){
if(this.selectBoxTimeItemList.selectTimeValue2 != undefined){
this.setSelectTimeValue2(val);
}else{
this.setPageData({ isFind: true });
}
},
selectTimeValue2(val){
this.setSelectTimeValue1(val);
// this.setPageData({ isFind: true });
},
myCmCycle() {
this.cmCycleFlag = false;
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
this.startDatepickerInstance.setType(this.myOptions.type);
this.endDatepickerInstance.setType(this.myOptions.type);
},
fromDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.toDtValueChkRang(newVal);
this.startDatepickerInstance.setDate(new Date(newVal));
this.fromDtOldVal = newVal;
this.setSelectTimeValue1(this.selectTimeValue2, 'check');
this.setSelectTimeValue2(this.selectTimeValue1, 'check');
} else {
this.setPageData({ isFind: true });
}
},
toDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.fromDtValueChkRang(newVal);
this.endDatepickerInstance.setDate(new Date(newVal));
this.toDtOldVal = newVal;
this.setSelectTimeValue1(this.selectTimeValue2, 'check');
this.setSelectTimeValue2(this.selectTimeValue1, 'check');
}
},
},
created() {
if (this.timePicker) {
this.setPageData({
fromDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 00:00:00',
toDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 23:59:59',
});
}
},
mounted() {
const startContainer = document.getElementById('startpicker-container');
const startTarget = document.getElementById('startpicker');
const endContainer = document.getElementById('endpicker-container');
const endTarget = document.getElementById('endpicker');
// datepicker 생성
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: startTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성
this.endDatepickerInstance = new TuiDatepicker(endContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: endTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성 끝
// datepicker 초기값 생성
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
// datepicker 초기값 생성 끝
// datepicker 변경시 이벤트 추가
this.startDatepickerInstance.on('change', () => this.getStartDt());
this.endDatepickerInstance.on('change', () => this.getEndDt());
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
getStartDt() {
const dt = this.startDatepickerInstance.getDate();
this.setPageData({
fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
getEndDt() {
const dt = this.endDatepickerInstance.getDate();
this.setPageData({
toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
fromDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.fromDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = compareDt.diff(defaultDt, rangeKey);
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
// }
// this.cmCycleFlag = true;
} else {
this.setPageData({
fromDt: Utility.setBeforetDate(
this.searchParam,
compareDt,
this.myOptions.sendFormat,
),
});
}
},
toDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.toDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = defaultDt.diff(compareDt, rangeKey);
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
this.setPageData({
toDt: Utility.setAftertDate(
this.searchParam,
compareDt,
this.myOptions.sendFormat,
),
});
}
},
setSelectTimeValue2(val, type='default'){
this.setPageData({selectTimeValue1:val});
let toDt = this.toDtOldVal;
let fromDt = this.fromDtOldVal;
let dayDiff = DateUtility.diff(fromDt,toDt,'days');
let selectTimeValueList2 = this.selectTimeValueList2.map(item => {
return item.value;
});
if(dayDiff <= 0 && selectTimeValueList2.indexOf(this.selectTimeValue2) < selectTimeValueList2.indexOf(val)){
// this.selectTimeValue2 = selectTimeValueList2[selectTimeValueList2.indexOf(val)];
this.selectTimeValue2 = val;
this.setPageData({selectTimeValue2:val});
}else{
if(type=='default'){
this.setPageData({ isFind: true });
}
}
},
setSelectTimeValue1(val, type='default'){
this.setPageData({selectTimeValue2:val});
let toDt = this.toDtOldVal;
let fromDt = this.fromDtOldVal;
let dayDiff = DateUtility.diff(fromDt,toDt,'days');
let selectTimeValueList2 = this.selectTimeValueList2.map(item => {
return item.value;
});
if(dayDiff <= 0 && selectTimeValueList2.indexOf(val) < selectTimeValueList2.indexOf(this.selectTimeValue1)){
// this.selectTimeValue1 = selectTimeValueList2[selectTimeValueList2.indexOf(val)];
this.selectTimeValue1 = val;
// this.selectTimeValue1 = this.selectTimeValueList2[selectTimeValueList2.indexOf(val) + 1]
this.setPageData({selectTimeValue1:val});
}else{
if(type=='default'){
this.setPageData({ isFind: true });
}
}
}
},
};
</script>
<style lang="scss" scoped>
.datepicker-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#startpicker-container,
#endpicker-container {
width: 100%;
position: absolute;
top: 36px;
left: 0;
}
}
}
}
.v-input__custom {
flex: 0 0 auto;
&.half {
width: calc(50% - 20px);
}
}
::v-deep {
.tui-timepicker-row {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}
}
}
</style>

442
components/common/DatepickerTopView.vue Normal file
View File

@ -0,0 +1,442 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</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">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</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
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
</template>
</v-text-field>
</div>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import TuiDatepicker from 'tui-date-picker';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
},
timePicker: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
required: {
type: Boolean,
require: false,
default: false,
},
isRangeOption:{
type:Boolean,
require:false,
default: true
}
},
data() {
return {
today: new Date(),
startDatepickerInstance: null,
endDatepickerInstance: null,
startDtValue: null,
endDtValue: null,
cmCycleFlag: false,
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
myCmCycle() {
return this.searchParam.cmCycle;
},
myOptions() {
let returnObj = {};
switch (this.myCmCycle) {
case 'CYC_YEAR':
returnObj = {
type: 'year',
viewFormat: 'YYYY',
pickerFormat: 'YYYY',
sendFormat: 'YYYY',
};
break;
case 'CYC_MONTH':
returnObj = {
type: 'month',
viewFormat: 'YYYY-MM',
pickerFormat: 'YYYY-MM',
sendFormat: 'YYYYMM',
};
break;
case 'CYC_DAY':
returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD',
pickerFormat: 'yyyy-MM-dd',
sendFormat: 'YYYYMMDD',
};
break;
case 'CYC_HOUR':
returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD' + (this.timePicker ? ' HH:mm:ss' : ''),
pickerFormat: 'yyyy-MM-dd' + (this.timePicker ? ' HH:mm A' : ''),
sendFormat: this.timePicker ? 'YYYY-MM-DD HH:mm:ss' : 'YYYYMMDD',
};
// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
break;
default:
break;
}
return returnObj;
},
// maxDate() {
// return Utility.setFormatDate("today", this.myOptions.format);
// },
fromDtValue() {
return Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
);
},
toDtValue() {
return Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
);
},
toDtChange(){
return {
isCheck:this.searchParam.isCheck ,
toDt : Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
)};
},
fromDtChange(){
return {
isCheck:this.searchParam.isCheck ,
fromDt : Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
)};
},
defaultRange() {
return this.searchParam.defaultRange
? this.searchParam.defaultRange[this.myCmCycle]
: null;
},
isRange() {
return (
(this.defaultRange !== null && this.defaultRange > 0 && this.isRangeOption) ||
this.defaultRange === 'no limite'
);
},
},
watch: {
myCmCycle() {
this.cmCycleFlag = false;
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
this.startDatepickerInstance.setType(this.myOptions.type);
this.endDatepickerInstance.setType(this.myOptions.type);
},
fromDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.toDtValueChkRang(newVal);
this.startDatepickerInstance.setDate(new Date(newVal));
} else {
this.setPageData({ isFind: true });
}
},
toDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.fromDtValueChkRang(newVal);
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
fromDtChange:{
deep:true,
handler(){
if(this.fromDtChange.isCheck){
this.fromDtChanged(this.fromDtChange.fromDt);
this.setPageData({
isCheck : false
})
}
}
},
toDtChange:{
deep:true,
handler(){
if(this.toDtChange.isCheck){
this.toDtChanged(this.toDtChange.toDt);
this.setPageData({
isCheck : false
})
}
}
}
},
created() {
if (this.timePicker) {
this.setPageData({
fromDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 00:00:00',
toDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 23:59:59',
});
}
},
mounted() {
const startContainer = document.getElementById('startpicker-container');
const startTarget = document.getElementById('startpicker');
const endContainer = document.getElementById('endpicker-container');
const endTarget = document.getElementById('endpicker');
// datepicker 생성
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: startTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성
this.endDatepickerInstance = new TuiDatepicker(endContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: endTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성 끝
// datepicker 초기값 생성
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
// datepicker 초기값 생성 끝
// datepicker 변경시 이벤트 추가
this.startDatepickerInstance.on('change', () => this.getStartDt());
this.endDatepickerInstance.on('change', () => this.getEndDt());
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
getStartDt() {
const dt = this.startDatepickerInstance.getDate();
this.setPageData({
fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
getEndDt() {
const dt = this.endDatepickerInstance.getDate();
this.setPageData({
toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
toDtChanged(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.fromDtValueChkRang(newVal);
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
fromDtChanged(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.toDtValueChkRang(newVal);
this.startDatepickerInstance.setDate(new Date(newVal));
} else {
this.setPageData({ isFind: true });
}
},
fromDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.fromDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = compareDt.diff(defaultDt, rangeKey);
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
// }
// this.cmCycleFlag = true;
} else {
this.setPageData({
fromDt: Utility.setBeforetDate(
this.searchParam,
compareDt,
this.myOptions.sendFormat,
),
});
}
},
toDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.toDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = defaultDt.diff(compareDt, rangeKey);
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
this.setPageData({
toDt: Utility.setAftertDate(
this.searchParam,
compareDt,
this.myOptions.sendFormat,
),
});
}
},
},
};
</script>
<style lang="scss" scoped>
.datepicker-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#startpicker-container,
#endpicker-container {
width: 100%;
position: absolute;
top: -260px;
left: 0;
}
}
}
}
.v-input__custom {
flex: 0 0 auto;
&.half {
width: calc(50% - 20px);
}
}
::v-deep {
.tui-timepicker-row {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}
}
}
</style>

396
components/common/DatepickerWidget.vue Normal file
View File

@ -0,0 +1,396 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</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">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</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
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
</template>
</v-text-field>
</div>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import TuiDatepicker from 'tui-date-picker';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
},
timePicker: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
widgetPage: {
type: String,
require: false,
},
},
data() {
return {
today: new Date(),
startDatepickerInstance: null,
endDatepickerInstance: null,
startDtValue: null,
endDtValue: null,
cmCycleFlag: false,
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
];
},
}),
myCmCycle() {
return this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
].cmCycle;
},
myOptions() {
let returnObj = {};
switch (this.myCmCycle) {
case 'CYC_YEAR':
returnObj = {
type: 'year',
viewFormat: 'YYYY',
pickerFormat: 'YYYY',
sendFormat: 'YYYY',
};
break;
case 'CYC_MONTH':
returnObj = {
type: 'month',
viewFormat: 'YYYY-MM',
pickerFormat: 'YYYY-MM',
sendFormat: 'YYYYMM',
};
break;
case 'CYC_DAY':
returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD',
pickerFormat: 'yyyy-MM-dd',
sendFormat: 'YYYYMMDD',
};
break;
case 'CYC_HOUR':
returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD' + (this.timePicker ? ' HH:mm:ss' : ''),
pickerFormat: 'yyyy-MM-dd' + (this.timePicker ? ' HH:mm A' : ''),
sendFormat: this.timePicker ? 'YYYY-MM-DD HH:mm:ss' : 'YYYYMMDD',
};
// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
break;
default:
break;
}
return returnObj;
},
// maxDate() {
// return Utility.setFormatDate("today", this.myOptions.format);
// },
fromDtValue() {
return Utility.setFormatDate(
this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
].fromDt,
this.myOptions.viewFormat,
);
},
toDtValue() {
return Utility.setFormatDate(
// this.$store.state.pageData[this.parentPrgmId][this.widgetPage][this.widgetPage+'Data'].toDt,
this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
].toDt,
this.myOptions.viewFormat,
);
},
defaultRange() {
return this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
].defaultRange
? this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
].defaultRange[this.myCmCycle]
: null;
},
isRange() {
return (
(this.defaultRange !== null && this.defaultRange > 0) ||
this.defaultRange === 'no limite'
);
},
},
watch: {
myCmCycle() {
this.cmCycleFlag = false;
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
this.startDatepickerInstance.setType(this.myOptions.type);
this.endDatepickerInstance.setType(this.myOptions.type);
},
fromDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.toDtValueChkRang(newVal);
this.startDatepickerInstance.setDate(new Date(newVal));
} else {
this.setPageData({ isFind: true });
}
},
toDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.fromDtValueChkRang(newVal);
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
},
created() {
if (this.timePicker) {
this.setPageData({
fromDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 00:00:00',
toDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 23:59:59',
});
}
},
mounted() {
const startContainer = document.getElementById('startpicker-container');
const startTarget = document.getElementById('startpicker');
const endContainer = document.getElementById('endpicker-container');
const endTarget = document.getElementById('endpicker');
// datepicker 생성
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: startTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성
this.endDatepickerInstance = new TuiDatepicker(endContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: endTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성 끝
// datepicker 초기값 생성
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
// datepicker 초기값 생성 끝
// datepicker 변경시 이벤트 추가
this.startDatepickerInstance.on('change', () => this.getStartDt());
this.endDatepickerInstance.on('change', () => this.getEndDt());
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
getStartDt() {
const dt = this.startDatepickerInstance.getDate();
this.setPageData({
fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
getEndDt() {
const dt = this.endDatepickerInstance.getDate();
this.setPageData({
toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
fromDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.fromDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = compareDt.diff(defaultDt, rangeKey);
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
// }
// this.cmCycleFlag = true;
} else {
// this.setPageData({
// fromDt: Utility.setBeforetDate(
// this.$store.state.pageData[this.parentPrgmId][this.widgetPage][this.widgetPage+'Data'].fromDt,
// compareDt,
// this.myOptions.sendFormat
// )
// });
this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
].fromDt = Utility.setBeforetDate(
this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
],
compareDt,
this.myOptions.sendFormat,
);
}
},
toDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.toDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = defaultDt.diff(compareDt, rangeKey);
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
this.setPageData({
toDt: Utility.setAftertDate(
this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
this.widgetPage + 'Data'
],
compareDt,
this.myOptions.sendFormat,
),
});
}
},
},
};
</script>
<style lang="scss" scoped>
.datepicker-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#startpicker-container,
#endpicker-container {
width: 100%;
position: absolute;
top: 36px;
left: 0;
}
}
}
}
.v-input__custom {
flex: 0 0 auto;
&.half {
width: calc(50% - 20px);
}
}
::v-deep {
.tui-timepicker-row {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}
}
}
</style>

711
components/common/Grid.vue Normal file
View File

@ -0,0 +1,711 @@
<template>
<tui-grid
:ref="['tuigrid' + gridName]"
:data="chkGridData"
:columns="chkGridColumns"
:options="chkGridOptions"
@focusChange="focusChangeEvt"
@click="startEditing"
@editingFinish="editingFinish"
@dblclick="dblClick"
@mouseover="mouseoverEvent"
@mouseout="mouseoutEvent"
/>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
gridName: {
type: String,
require: true,
},
dataPath: {
type: Object,
require: false,
default: null,
},
editorGrid: {
type: Boolean,
default: false,
require: false,
},
innerTabGridInfo: {
type: Object,
default: null,
},
selectedRowDataWatchFlag: {
type: Boolean,
require: false,
default: false,
},
preventFocusChangeEventFlag: {
type: Boolean,
require: false,
default: false,
},
// gridInstance Array
preventFocusChangeEventTargetGridList: {
type: Array,
require: false,
default: null,
},
columnClickEventFlag: {
type: Boolean,
require: false,
default: false,
},
mouseoverEvent: {
type: Function,
default() {
return 'Default Function';
},
},
mouseoutEvent: {
type: Function,
default() {
return 'Default Function';
},
},
},
data() {
return {
gridInstance: null,
gridHeight: null,
selecrRowKey: null,
originData: [],
editorStartKey: null,
editorEndKey: null,
scrollBody: null,
gridScrollTop: 0,
gridScrollLeft: 0,
};
},
computed: {
...mapState({
pageData: state => state.pageData,
gridData(state) {
return this.dataPath
? this.dataPath[this.gridName]
: state.pageData[this.parentPrgmId][this.gridName];
},
drawer: state => state.drawer,
activePrgmId(state) {
return state.activeMenuInfo.prgmId;
},
}),
chkGridData() {
// return this.pageData[this.parentPrgmId][this.gridName].data;
return this.gridData.data;
},
chkGridColumns() {
return this.gridData.column;
},
chkGridOptions() {
const options = {
...this.gridData.option,
};
options.treeColumnOptions = {
useIcon: false,
...options.treeColumnOptions,
};
return options;
},
defaultRow() {
return this.gridData.defaultRow;
},
},
watch: {
chkGridData(val) {
this.$refs['tuigrid' + this.gridName].invoke('resetData', val);
},
innerTabGridInfo(val) {
const _this = this;
setTimeout(() => {
_this.refreshLayout();
}, 500);
},
activePrgmId(val) {
const _this = this;
setTimeout(() => {
_this.refreshLayout();
}, 700);
if (val == this.parentPrgmId) {
setTimeout(() => {
if (!_this.innerTabGridInfo) {
//_this.refreshLayout();
_this.scrollBody.scrollTop = _this.gridScrollTop;
_this.scrollBody.scrollLeft = _this.gridScrollLeft;
} else {
if (_this.innerTabGridInfo.tab == _this.innerTabGridInfo.idx) {
//_this.refreshLayout();
_this.scrollBody.scrollTop = _this.gridScrollTop;
_this.scrollBody.scrollLeft = _this.gridScrollLeft;
}
}
}, 1000);
}
},
drawer() {
const _this = this;
setTimeout(() => {
_this.refreshLayout();
}, 500);
},
},
created() {},
async mounted() {
// console.log(this.dataPath);
if (this.gridName) {
this.gridInstance = this.$refs['tuigrid' + this.gridName];
this.scrollBody = document
.getElementsByClassName('tui-grid-rside-area')
[
document.getElementsByClassName('tui-grid-rside-area').length - 1
].getElementsByClassName('tui-grid-body-area')[0];
this.scrollBody.addEventListener('scroll', e => {
this.gridScrollTop = e.target.scrollTop;
this.gridScrollLeft = e.target.scrollLeft;
});
}
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setGridData: 'setGridData',
}),
// true : 현재 행 혹은 연결된 그리드가 수정중인 상태
checkGridState() {
var rowStatList = ['I', 'U', 'D'];
var row = this.gridInstance.invoke('getFocusedCell');
if (row) {
var rowData = this.gridInstance.invoke('getRow', row.rowKey);
if (rowData) {
var rowStat = rowData['rowStat'];
if (rowStatList.includes(rowStat)) {
return true;
}
}
}
if (this.preventFocusChangeEventTargetGridList) {
for (var gridInstance of this.preventFocusChangeEventTargetGridList) {
var dataArr = gridInstance.save();
if (dataArr.length > 0) {
return true;
}
}
}
return false;
},
preventFocusChangeEvent(e) {
var result = false;
if (this.preventFocusChangeEventFlag) {
if (this.checkGridState()) {
e.stop();
return true;
}
}
return result;
},
columnClickEvent(e) {
var result = false;
if (this.columnClickEventFlag) {
return true;
}
return result;
},
getCheckedRowsEvt() {
const checkedRowDataList = this.gridInstance.invoke('getCheckedRows');
return checkedRowDataList;
},
dblClick(nativeEvent) {
if (this.preventFocusChangeEvent(nativeEvent)) {
return;
}
this.$emit(
'dblClick',
this.gridInstance.invoke('dblclick'),
nativeEvent,
this.gridName,
);
},
uncheckEvt(rowData, instance) {
this.gridInstance.invoke('uncheck', rowData.rowKey, instance);
},
checkEvt(rowData, instance) {
this.gridInstance.invoke('check', rowData.rowKey, instance);
},
setSelectionRange(rowKey) {
const rowDatas = this.gridInstance.invoke('getData');
rowDatas.forEach(item => {
if (item.rowKey == rowKey) {
this.gridInstance.invoke(
'addRowClassName',
item.rowKey,
'row-selected',
);
} else {
this.gridInstance.invoke(
'removeRowClassName',
item.rowKey,
'row-selected',
);
}
});
},
focusChangeEvt(e) {
// console.log('focusChangeEvt1...')
if (this.preventFocusChangeEvent(e)) {
// console.log('prevent focusChangeEvt')
return;
}
// console.log('focusChangeEvt2...')
// cell 선택시 row 선택 method
if (e.rowKey >= 0) {
this.$emit(
'getRowsData',
this.gridInstance.invoke('getRow', e.rowKey),
this.gridName,
e.columnName,
);
this.selecrRowKey = e.rowKey;
this.setSelectionRange(e.rowKey);
}
this.sendSelectedRowData(e.rowKey);
},
startEditing(e) {
// console.log('startEditing1...')
if (this.preventFocusChangeEvent(e)) {
// console.log('prevent startEditing')
return;
}
if (this.columnClickEvent(e)) {
this.$emit('columnClick', e, this.gridName);
return;
}
// console.log('startEditing2...')
if (this.editorGrid && e.rowKey >= 0) {
this.editorStartKey = e.rowKey;
// console.log("E::", this.gridInstance.invoke("getRow", e.rowKey));
this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
this.$emit(
'getRowsData',
this.gridInstance.invoke('getRow', e.rowKey),
this.gridName,
e.columnName,
);
this.setSelectionRange(e.rowKey);
}
},
async editingFinish(e) {
// console.log("Editing END E::", e);
// editor 간 이동시 수정되는 문제 수정
// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
if (this.editorGrid) {
this.editorEndKey = Number.isInteger(e.rowKey) ? e.rowKey : null;
if (e.rowEditingFg == undefined && this.editorStartKey >= 0) {
if (this.editorStartKey != this.editorEndKey) {
this.editorStartKey = null;
this.editorEndKey = null;
return false;
}
}
}
const rowIdxKey = this.editorGrid ? this.editorEndKey : this.gridInstance.invoke('getFocusedCell').rowKey
// editor 간 이동시 수정되는 문제 수정 끝
const columnName = e.columnName;
const value = e.value;
const editingData = {
...e,
rowKey: rowIdxKey,
};
const isBaseRow = this.isBaseDataRow(rowIdxKey);
// console.log("END E::", rowIdxKey, e);
const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
if (rowStat == 'D') {
this.gridInstance.invoke(
'removeRowClassName',
rowIdxKey,
'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);
if (isSameData) {
this.gridInstance.invoke(
'removeRowClassName',
rowIdxKey,
'row-modify',
);
this.updateData('clear', rowIdxKey);
} else {
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-modify');
this.updateData('modify', rowIdxKey);
}
}
if (
e.ignoreUpdateDataInfoFlag === undefined ||
e.ignoreUpdateDataInfoFlag === false
) {
this.$emit('updateDataInfo', {
rowIdxKey: rowIdxKey,
rowStat: rowStat,
columnName: columnName,
value: value,
rowData: this.gridInstance.invoke('getRow', rowIdxKey),
});
}
this.sendSelectedRowData();
},
async addRow(setData, argRowKey) {
// 그리드가 수정중인 상태면 addRow를 하지 않음
if (this.preventFocusChangeEventFlag) {
if (this.checkGridState()) {
return true;
}
}
const addData = !setData
? this.defaultRow
: Object.assign(this.defaultRow, setData);
// 열 앞에 데이터 추가
// if (argRowKey != undefined && argRowKey != null) {
this.gridInstance.invoke('appendRow', addData, {
focus: true,
});
// } else {
// this.gridInstance.invoke('prependRow', addData, {
// focus: true,
// });
// }
// this.gridInstance.invoke('prependRow', addData, {
// focus: true,
// });
this.$nextTick(() => {
var addRowKey = this.gridInstance.invoke('getFocusedCell').rowKey;
if (argRowKey) {
addRowKey = argRowKey;
}
this.gridInstance.invoke(
'removeRowClassName',
addRowKey,
'row-removed',
);
this.gridInstance.invoke('addRowClassName', addRowKey, 'row-insert');
this.updateData('insert', addRowKey);
});
},
async appendRow() {
this.gridInstance.invoke('appendRow', {
focus: true,
});
},
async addTreeRow(setData) {
// tree append의 경우 무한루프가 발행하는 버그현상으로 appendRows로 추가
const addData = !setData
? this.defaultRow
: Object.assign(this.defaultRow, setData);
this.gridInstance.invoke('appendRows', [addData]);
this.$nextTick(() => {
const rowDatas = this.gridInstance.invoke('getData');
const addRowKey = rowDatas[rowDatas.length - 1].rowKey;
this.gridInstance.invoke(
'removeRowClassName',
addRowKey,
'row-removed',
);
this.gridInstance.invoke('addRowClassName', addRowKey, 'row-insert');
this.updateData('insert', addRowKey);
this.gridInstance.invoke('focus', addRowKey);
});
},
async removeRow(delType, argRowKey) {
var rowIdxKey = this.gridInstance.invoke('getFocusedCell').rowKey;
if (typeof argRowKey == 'number') {
rowIdxKey = argRowKey;
}
const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
if (rowStat === 'D') {
this.gridInstance.invoke(
'removeRowClassName',
rowIdxKey,
'row-removed',
);
this.updateData('clear', rowIdxKey);
} else {
if (!this.isBaseDataRow(rowIdxKey)) {
this.gridInstance.invoke('removeRow', rowIdxKey);
let nextFocus = Number(rowIdxKey) - 1;
if (!this.isBaseDataRow(nextFocus)) nextFocus = 0;
this.gridInstance.invoke('focus', nextFocus);
} else {
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-removed');
this.updateData('delete', rowIdxKey);
if (delType == 'immediately')
this.gridInstance.invoke('removeRow', rowIdxKey);
}
}
},
async removeTreeRow(delType) {
const rowIdxKey = this.gridInstance.invoke('getFocusedCell').rowKey;
const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
if (rowStat === 'D') {
this.gridInstance.invoke(
'removeRowClassName',
rowIdxKey,
'row-removed',
);
this.updateData('clear', rowIdxKey);
} else {
if (!this.isBaseDataRow(rowIdxKey)) {
this.updateData('clear', rowIdxKey);
this.gridInstance.invoke('removeRow', rowIdxKey);
let nextFocus = Number(rowIdxKey) - 1;
if (!this.isBaseDataRow(nextFocus)) nextFocus = 0;
this.gridInstance.invoke('focus', nextFocus);
} else {
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-removed');
this.updateData('delete', rowIdxKey);
if (delType == 'immediately')
this.gridInstance.invoke('removeRow', rowIdxKey);
}
}
},
isBaseDataRow(rowKey) {
// 기존데이터 여부 확인 (추가된 데이터 X)
const findRow = this.gridInstance.invoke('findRows', { rowKey: rowKey });
return findRow && findRow[0] && findRow[0].rowStat != 'I' ? true : false;
},
compareData(data) {
// rowStat key값 제거
const dataKeyArr = Object.keys(this.defaultRow);
const rowStatIdx = dataKeyArr.indexOf('rowStat');
dataKeyArr.splice(rowStatIdx, 1);
// rowStat key값 제거 끝
const selectedRowData = this.gridInstance.invoke('getRow', data.rowKey);
this.getOriginData();
const rowData = this.originData.find(item => {
return item.rowKey == data.rowKey;
});
let count = 0;
// console.log("dataKeyArr", dataKeyArr);
// console.log("selectedRowData", selectedRowData);
for (let i = 0; i < dataKeyArr.length; i++) {
// console.log(dataKeyArr[i], selectedRowData[dataKeyArr[i]], rowData[dataKeyArr[i]]);
if (selectedRowData[dataKeyArr[i]] == rowData[dataKeyArr[i]]) {
count++;
}
}
return dataKeyArr.length == count ? true : false;
},
getOriginData() {
this.chkGridData.forEach(item => {
this.originData.push(item);
if (item._children) {
this.getChildrenData(item._children);
}
});
},
getChildrenData(children) {
children.forEach(item => {
this.originData.push(item);
if (item._children) {
this.getChildrenData(item._children);
}
});
},
updateData(updateType, rowIdxKey) {
let type = '';
switch (updateType) {
case 'insert':
type = 'I';
break;
case 'modify':
type = 'U';
break;
case 'delete':
type = 'D';
break;
case 'clear':
type = null;
break;
}
this.gridInstance.invoke('setValue', rowIdxKey, 'rowStat', type);
},
// 지정 로우 선택상태
focus(rowInfo) {
this.gridInstance.invoke(
'focus',
rowInfo.rowKey,
rowInfo.columnName,
rowInfo.setScroll,
);
},
// 트리 전체 접기
expandAll() {
this.gridInstance.invoke('expandAll');
},
// 트리 전체 펼치기
collapseAll() {
this.gridInstance.invoke('collapseAll');
},
save() {
const saveTargetRows = this.gridInstance.invoke('getModifiedRows');
// createdRows | deletedRows | updatedRows
const createdRows = saveTargetRows.createdRows;
const deletedRows = saveTargetRows.deletedRows;
const updatedRows = saveTargetRows.updatedRows;
const dataArr = [...createdRows, ...deletedRows, ...updatedRows]
.filter(item => item.rowStat)
.map(item => {
delete item.rowKey;
return item;
});
// console.log("dataArr::", dataArr, saveTargetRows);
return dataArr;
},
getData() {
return this.gridInstance.invoke('getData');
},
getCheckedRows() {
return this.gridInstance.invoke('getCheckedRows');
},
getCheckedRowKeys() {
return this.gridInstance.invoke('getCheckedRowKeys');
},
setCheck(list) {
// console.log("setCheck:: ", list);
list.map(item => this.gridInstance.invoke('check', item));
},
refreshLayout() {
this.gridInstance.invoke('refreshLayout');
},
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;
// console.log("containerEl : ",containerEl);
// console.log('parentEl : ', parentEl)
// function refreshLayout(store, containerEl, parentEl) {
var dimension = store.dimension;
var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
var clientHeight = containerEl.clientHeight, clientWidth = containerEl.clientWidth, scrollTop = containerEl.scrollTop, scrollLeft = containerEl.scrollLeft;
var _a = containerEl.getBoundingClientRect(), top = _a.top, left = _a.left;
this.setOffsetTop(store, top + scrollTop);
// store.dimension.setOffsetTop = top + scrollTop;
this.setOffsetLeft(store, left + scrollLeft);
// store.dimension.headerHeight = left + scrollLeft;
this.setWidth(store, clientWidth, autoWidth);
// store.dimension.autoWidth = autoWidth;
// store.dimension.width = clientWidth;
// console.log("###",getComputedStyle(parentEl));
// console.log("fitToParentHeight : ",fitToParentHeight);
// console.log("parentEl : ",parentEl)
// 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)));
}
// }
},
setOffsetTop(store, offsetTop) {
// console.log("setOffsetTop");
store.dimension.offsetTop = offsetTop;
},
setWidth(_a, width, autoWidth) {
// console.log("setWidth");
var dimension = _a.dimension;
dimension.autoWidth = autoWidth;
dimension.width = width;
},
setHeaderHeight(store, height) {
// console.log("setHeaderHeight")
store.dimension.headerHeight = height;
},
setOffsetLeft(store, offsetLeft) {
// console.log("setOffsetLeft")
store.dimension.offsetLeft = offsetLeft;
},
setHeight(_a,height){
// console.log("setHeight");
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 =
eventRowKey === undefined
? this.gridInstance.invoke('getFocusedCell').rowKey
: eventRowKey;
var rowData = this.gridInstance.invoke('getRow', rowKey);
this.$emit('sendSelectedRowStatInfo', rowData);
}
},
disableRow(rowKey, withCheckBox = false) {
this.gridInstance.invoke('disableRow', rowKey, withCheckBox);
},
async disabledRow(addRowKey) {
this.$nextTick(() => {
this.gridInstance.invoke(
'removeRowClassName',
addRowKey,
'row-removed',
);
this.gridInstance.invoke('addRowClassName', addRowKey, 'row-disabled');
});
},
// resetData() {
// // console.log("resetData = ", this.tuigridProps.data);
// this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
// }
},
};
</script>
<style scoped lang="scss">
::v-deep .tui-grid-container {
.tui-grid-content-area {
.tui-grid-cell-content {
input[type='number'] {
width: 100%;
}
}
}
}
</style>

245
components/common/Grid2.vue Normal file
View File

@ -0,0 +1,245 @@
<template>
<tui-grid
:ref="['tuigrid' + gridName]"
:data="chkGridData"
:columns="chkGridColumns"
:options="chkGridOptions"
@focusChange="focusChangeEvt"
@click="startEditing"
@editingFinish="editingFinish"
/>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
gridName: {
type: String,
require: true,
},
dataPath: {
type: Object,
require: false,
default: null,
},
editorGrid: {
type: Boolean,
default: false,
require: false,
},
},
data() {
return {
gridInstance: null,
gridHeight: null,
selecrRowKey: null,
};
},
computed: {
...mapState({
// pageData: state => state.pageData
pageData(state) {
return this.dataPath
? this.dataPath[this.gridName]
: state.pageData[this.parentPrgmId][this.gridName];
},
}),
chkGridData() {
return this.pageData.data;
},
chkGridColumns() {
return this.pageData.column;
},
chkGridOptions() {
return this.pageData.option;
},
defaultRow() {
return this.pageData.defaultRow;
},
},
watch: {
chkGridData(val) {
this.$refs['tuigrid' + this.gridName].invoke('resetData', val);
},
},
created() {},
async mounted() {
// console.log(this.dataPath);
if (this.gridName) {
this.gridInstance = this.$refs['tuigrid' + this.gridName];
}
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setGridData: 'setGridData',
}),
getCheckedRowsEvt() {
const checkedRowDataList = this.gridInstance.invoke('getCheckedRows');
return checkedRowDataList;
},
uncheckEvt(rowData, instance) {
this.gridInstance.invoke('uncheck', rowData.rowKey, instance);
},
checkEvt(rowData, instance) {
this.gridInstance.invoke('check', rowData.rowKey, instance);
},
focusChangeEvt(e) {
// cell 선택시 row 선택 method
if (!this.editorGrid) {
this.$emit('getRowsData', this.gridInstance.invoke('getRow', e.rowKey));
this.selecrRowKey = e.rowKey;
const rowIndxKey = this.gridInstance.invoke('getIndexOfRow', e.rowKey);
this.gridInstance.invoke('setSelectionRange', {
start: [rowIndxKey, 0],
end: [rowIndxKey, this.gridInstance.columns.length],
});
}
},
startEditing(e) {
if (this.editorGrid) {
this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
const rowIndxKey = this.gridInstance.invoke('getIndexOfRow', e.rowKey);
this.gridInstance.invoke('setSelectionRange', {
start: [rowIndxKey, 0],
end: [rowIndxKey, this.gridInstance.columns.length],
});
}
},
editingFinish(e) {
// console.log("editingFinish::e", e);
const rowIdxKey = e.rowKey;
const columnName = e.columnName;
const value = e.value;
const isAddRow = this.isBaseDataRow(rowIdxKey);
this.gridInstance.invoke('setValue', rowIdxKey, columnName, value);
if (isAddRow != -1) {
const isSameData = this.compareData(e);
if (!isSameData) {
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-modify');
this.updateData('modify', rowIdxKey);
}
}
},
async addRow() {
// 열 앞에 데이터 추가
this.gridInstance.invoke('prependRow', this.defaultRow, {
focus: true,
});
// const aa = this.gridInstance.invoke("getModifiedRows");
// console.log("this.gridInstance", this.gridInstance, aa);
this.$nextTick(() => {
const addRowKey = this.gridInstance.invoke('getFocusedCell').rowKey;
// console.log("addRowKey :: ", addRowKey);
this.gridInstance.invoke('addRowClassName', addRowKey, 'row-insert');
this.updateData('insert', addRowKey);
});
},
removeRow() {
const rowIdxKey = this.gridInstance.invoke('getFocusedCell').rowKey;
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-removed');
this.gridInstance.invoke('disableRow', rowIdxKey);
this.updateData('delete', rowIdxKey);
},
externalDataEdit(obj) {
const rowIdxKey = this.gridInstance.invoke('getFocusedCell').rowKey;
const columnName = obj.name;
const value = obj.value;
const isAddRow = this.isBaseDataRow(rowIdxKey);
this.gridInstance.invoke('setValue', rowIdxKey, columnName, value);
if (isAddRow != -1) {
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-modify');
this.updateData('modify', rowIdxKey);
}
},
isBaseDataRow(rowKey) {
// 기존데이터 여부 확인 (추가된 데이터 X)
return this.chkGridData.map(item => item.rowKey).indexOf(rowKey);
},
compareData(data) {
const rowData = this.chkGridData.filter(item => {
return item.rowKey == data.rowKey;
})[0];
// console.log(rowData);
return rowData[data.columnName] == data.value;
},
updateData(updateType, rowIdxKey) {
let type = '';
switch (updateType) {
case 'insert':
type = 'I';
break;
case 'modify':
type = 'U';
break;
case 'delete':
type = 'D';
break;
}
this.gridInstance.invoke('setValue', rowIdxKey, 'rowStat', type);
},
// 지정 로우 선택상태
focus(rowInfo) {
this.gridInstance.invoke(
'focus',
rowInfo.rowKey,
rowInfo.columnName,
rowInfo.setScroll,
);
},
// 트리 전체 접기
expandAll() {
this.gridInstance.invoke('expandAll');
},
// 트리 전체 펼치기
collapseAll() {
this.gridInstance.invoke('collapseAll');
},
save() {
const saveTargetRows = this.gridInstance.invoke('getModifiedRows');
// createdRows | deletedRows | updatedRows
const createdRows = saveTargetRows.createdRows.map(item => {
delete item.rowKey;
return item;
});
const deletedRows = saveTargetRows.deletedRows.map(item => {
delete item.rowKey;
return item;
});
const updatedRows = saveTargetRows.updatedRows.map(item => {
delete item.rowKey;
return item;
});
const dataArr = createdRows.concat(deletedRows).concat(updatedRows);
return dataArr;
// this.$emit("saveGrid", saveTargetRows);
},
// resetData() {
// // console.log("resetData = ", this.tuigridProps.data);
// this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
// }
},
};
</script>
<style scoped lang="scss">
::v-deep .tui-grid-cell {
&.row-insert {
background-color: #13636c !important;
color: #fff !important;
}
&.row-modify {
background-color: #13636c;
}
&.row-removed {
background-color: red;
}
}
</style>

354
components/common/PastRsltDatePicker.vue Normal file
View File

@ -0,0 +1,354 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</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">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</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
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
</template>
</v-text-field>
</div>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import TuiDatepicker from 'tui-date-picker';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
},
timePicker: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
},
data() {
return {
today: new Date(),
startDatepickerInstance: null,
endDatepickerInstance: null,
startDtValue: null,
endDtValue: null,
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
myCmCycle() {
return this.searchParam.cmCycle;
},
myOptions() {
let returnObj = {
type: 'date',
viewFormat: 'YYYY-MM-DD',
pickerFormat: 'yyyy-MM-dd',
sendFormat: 'YYYYMMDD',
};
return returnObj;
},
// maxDate() {
// return Utility.setFormatDate("today", this.myOptions.format);
// },
fromDtValue() {
return Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
);
},
toDtValue() {
return Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
);
},
defaultRange() {
return this.searchParam.defaultRange
? this.searchParam.defaultRange[this.myCmCycle]
: null;
},
isRange() {
return (
(this.defaultRange !== null && this.defaultRange > 0) ||
this.defaultRange === 'no limite'
);
},
},
watch: {
myCmCycle() {
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
this.startDatepickerInstance.setType(this.myOptions.type);
this.endDatepickerInstance.setType(this.myOptions.type);
},
fromDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.toDtValueChkRang(newVal);
this.startDatepickerInstance.setDate(new Date(newVal));
} else {
this.setPageData({ isFind: true });
}
},
toDtValue(newVal, oldVal) {
if (
this.isRange &&
this.defaultRange !== 'no limite' &&
newVal !== 'Invalid Date' &&
newVal !== oldVal
) {
this.fromDtValueChkRang(newVal);
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
},
created() {
if (this.timePicker) {
this.setPageData({
fromDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 00:00:00',
toDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 23:59:59',
});
}
},
mounted() {
const startContainer = document.getElementById('startpicker-container');
const startTarget = document.getElementById('startpicker');
const endContainer = document.getElementById('endpicker-container');
const endTarget = document.getElementById('endpicker');
// datepicker 생성
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: startTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성
this.endDatepickerInstance = new TuiDatepicker(endContainer, {
date: this.today,
language: 'ko',
type: this.myOptions.type, // "date", // type: date || month || year
input: {
element: endTarget,
format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
},
timePicker: this.timePicker,
calendar: {
showToday: false,
},
});
// datepicker 생성 끝
// datepicker 초기값 생성
this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
// datepicker 초기값 생성 끝
// datepicker 변경시 이벤트 추가
this.startDatepickerInstance.on('change', () => this.getStartDt());
this.endDatepickerInstance.on('change', () => this.getEndDt());
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
setDatePicker(type, compareDate, formatDate, formatTime) {
let returnDt = null;
const dayjs = require('dayjs');
const compareDt = dayjs(compareDate);
const formatType = formatDate + (formatTime ? ' ' + formatTime : '');
const defaultRange = this.defaultRange;
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
if (type == 'toDt') {
returnDt = compareDt.add(myRange, rangeKey).subtract(1, 'day');
} else {
returnDt = compareDt.subtract(myRange, rangeKey).add(1, 'day');
}
return returnDt.format(formatType);
},
getStartDt() {
const dt = this.startDatepickerInstance.getDate();
this.setPageData({
fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
getEndDt() {
const dt = this.endDatepickerInstance.getDate();
this.setPageData({
toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
});
},
fromDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.fromDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = compareDt.diff(defaultDt, rangeKey);
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
// }
// this.cmCycleFlag = true;
} else {
this.setPageData({
fromDt: this.setDatePicker(
'fromDt',
compareDt,
this.myOptions.sendFormat,
),
});
}
},
toDtValueChkRang(newDt) {
const defaultDt = this.$dayjs(this.toDtValue);
const compareDt = this.$dayjs(newDt);
const newDefault = Utility.setNewDefaultRange(
this.myCmCycle,
this.defaultRange,
);
const myRange = newDefault.range;
const rangeKey = newDefault.key;
const rangeGap = defaultDt.diff(compareDt, rangeKey);
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
this.setPageData({
toDt: this.setDatePicker(
'toDt',
compareDt,
this.myOptions.sendFormat,
),
});
}
},
},
};
</script>
<style lang="scss" scoped>
.datepicker-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#startpicker-container,
#endpicker-container {
width: 100%;
position: absolute;
top: 36px;
left: 0;
}
}
}
}
.v-input__custom {
flex: 0 0 auto;
&.half {
width: calc(50% - 20px);
}
}
::v-deep {
.tui-timepicker-row {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}
}
}
</style>

138
components/common/RadioCmCycle.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? 'auto' : ''">
<v-radio-group
v-model="selected"
required:rules="radioRules"
row
dense
:hide-details="true"
>
<v-radio
label="월별"
value="CYC_YEAR"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
<v-radio
label="일별"
value="CYC_MONTH"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
<v-radio
label="시간별"
value="CYC_DAY"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
</v-radio-group>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
default: '주기',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {
labelPrepend: true,
// selected:"CYC_DAY"
};
},
computed: {
...mapState({
searchParam: state => state.pageData,
isDarkMode: 'isDarkMode',
}),
selected: {
get() {
return this.searchParam[this.parentPrgmId].cmCycle;
},
set(value) {
this.setDefaultDate(value);
return this.setPageData({ cmCycle: value });
},
},
},
watch: {},
created() {
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
},
async mounted() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({}),
setDefaultDate(value) {
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
const today = Utility.setFormatDate('today', 'YYYY-MM-DD');
let srartDate = '';
let endDate = '';
// console.log(value);
switch (value) {
case 'CYC_YEAR':
// endDate = today;
srartDate = Utility.setFormatDate(today, 'YYYY');
break;
case 'CYC_MONTH':
// endDate = today;
srartDate = Utility.setFormatDate(today, 'YYYY-MM');
// endDate = today;
// srartDate = Utility.setBeforetDate(
// this.searchParam[this.parentPrgmId],
// endDate,
// "YYYYMMDD"
// );
break;
case 'CYC_DAY':
// endDate = today;
srartDate = today;
break;
default:
break;
}
this.setPageData({ fromDt: srartDate });
// console.log(this.searchParam[this.parentPrgmId].cmCycle);
// console.log(this.searchParam[this.parentPrgmId].dateRange);
},
},
};
</script>
<style></style>

113
components/common/RadioStandard.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-radio-group
v-model="selected"
required:rules="radioRules"
row
hide-details
dense
>
<v-radio
label="태그"
value="tag"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
<v-radio
label="검침개소"
value="readPlc"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
<v-radio
label="공정"
value="ecc"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
<v-radio
label="설비"
value="eqpm"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
</v-radio-group>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {
label: '기준',
labelPrepend: true,
// selected:"CYC_DAY"
};
},
computed: {
...mapState({
isDarkMode: 'isDarkMode',
searchParam: state => state.pageData,
}),
selected: {
get() {
return this.searchParam[this.parentPrgmId].rdbStandard;
},
set(value) {
return this.setPageData({ rdbStandard: value });
},
},
},
watch: {
selected(value) {
// 주기에 따른 오늘 기준 기본 날짜 세팅
this.setDefaultDate(value);
},
},
created() {
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
},
async mounted() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({}),
setDefaultDate(value) {
this.setPageData({ rdbStandard: value });
},
},
};
</script>
<style></style>

99
components/common/RadioUseCost.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-radio-group
v-model="selected"
required:rules="radioRules"
row
hide-details
dense
>
<v-radio
label="사용량"
value="use"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
<v-radio
label="비용"
value="cost"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
</v-radio-group>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {
label: '구분',
labelPrepend: true,
// selected:"CYC_DAY"
};
},
computed: {
...mapState({
isDarkMode: 'isDarkMode',
searchParam: state => state.pageData,
}),
selected: {
get() {
return this.searchParam[this.parentPrgmId].rdbUseCost;
},
set(value) {
return this.setPageData({ rdbUseCost: value });
},
},
},
watch: {
selected(value) {
// 주기에 따른 오늘 기준 기본 날짜 세팅
this.setDefaultDate(value);
},
},
created() {
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
},
async mounted() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({}),
setDefaultDate(value) {
this.setPageData({ rdbUseCost: value });
},
},
};
</script>
<style></style>

97
components/common/RadioView.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-radio-group
v-model="selectedView"
required:rules="radioRules"
row
dense
:hide-details="true"
>
<v-radio
label="전체"
value="viewAll"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
<v-radio
label="차트"
value="viewChart"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
<v-radio
label="그리드"
value="viewGrid"
:ripple="false"
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
on-icon="mdi-record-circle"
></v-radio>
</v-radio-group>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
},
data() {
return {
label: '',
labelPrepend: true,
// selected:"CYC_DAY"
};
},
computed: {
...mapState({
searchParam: state => state.pageData,
isDarkMode: 'isDarkMode',
}),
selectedView: {
get() {
return this.searchParam[this.parentPrgmId].viewCheck;
},
set(value) {
return this.setPageData({ viewCheck: value });
},
},
},
watch: {},
created() {
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
},
async mounted() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({}),
},
};
</script>
<style></style>

89
components/common/ThemeSwitch.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<v-switch
class="theme-switch"
v-model="mode"
@change="themeChange"
></v-switch>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
data() {
return {
mode: null,
};
},
computed: {
...mapState({
isDarkMode: 'isDarkMode',
}),
},
created() {
this.mode = this.isDarkMode;
},
methods: {
...mapMutations({
setThemeChange: 'setThemeChange',
}),
themeChange() {
this.$vuetify.theme.isDark = this.mode;
this.setThemeChange(this.mode);
},
},
};
</script>
<style lang="scss" scoped>
.theme-switch {
display: inline-flex;
width: 47px;
height: 30px;
::v-deep {
.v-input__control,
.v-input__slot {
height: 100%;
}
.v-input--selection-controls__input {
width: 100%;
margin-right: 0;
height: 100%;
}
.v-input--switch__track {
width: 100%;
height: 100%;
border-radius: 50px;
position: initial;
background-color: #f1f0f8;
}
input {
min-height: initial;
}
.v-input--selection-controls__ripple {
display: none;
}
.v-input--switch__thumb {
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #f2f2f2;
top: 2px;
left: 0;
background-image: url(../../assets/images/icon/ico-theme-light.png);
background-size: 18px 18px;
background-position: center center;
background-repeat: no-repeat;
}
}
&.v-input--is-label-active {
::v-deep {
.v-input--switch__track {
background-color: #383f5d;
}
.v-input--switch__thumb {
transform: translate(38px, 0);
background-image: url(../../assets/images/icon/ico-theme-dark.png);
}
}
}
}
</style>

42
components/common/button/ActionButtons.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div class="d-flex flex-column justify-center align-center">
<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')">
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
<v-btn
icon
tile
:ripple="false"
class="mt-2"
@click="btnActionsFnc('removeRightToLeft')"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</div>
</template>
<script>
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
leftGridName: {
type: String,
require: true,
},
rightGridName: {
type: String,
required: true,
},
btnActionsFnc: {
type: Function,
required: true,
},
},
computed: {},
data() {
return {};
},
};
</script>

16
components/common/button/BtnAddRow.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<v-btn :ripple="false" @click="btnActionsFnc('add')">추가</v-btn>
</template>
<script>
export default {
props: {
myGrid: {
require: true,
},
btnActionsFnc: {
type: Function,
required: true,
},
},
};
</script>

136
components/common/button/BtnExcelDownload.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<v-btn :ripple="false" @click="downloadExcelFile">액셀</v-btn>
</template>
<script>
import Utility from '~/plugins/utility';
import XLSX from 'xlsx';
import { mapState } from 'vuex';
export default {
name: 'btnExeclDownload',
props: {
parentPrgmId: {
type: String,
require: true,
},
gridName: {
type: String,
require: false,
},
dataPath: {
type: Object,
require: false,
default: null,
},
parentModalDataName: {
type: String,
require: false,
default: null,
},
myModalKey: {
type: String,
require: false,
default: null,
},
},
data() {
return {
xlsData: [],
xlsHeader: [],
};
},
computed: {
...mapState({
menuNm: state => state.activeMenuInfo.menuNm,
pageData(state) {
if (this.parentModalDataName == null) {
return state.pageData[this.parentPrgmId];
}
return state.pageData[this.parentPrgmId][this.parentModalDataName][
this.myModalKey
];
},
}),
tableId() {
return this.pageData.xlsFileInfo.tableId;
},
newXlsData() {
return this.pageData.xlsFileInfo[this.gridName].rowData;
},
},
methods: {
setExcelData() {
const xlsRowData = this.newXlsData || this.pageData[this.gridName].data;
const xlsHeader = this.pageData[this.gridName].column;
let tmpData = [];
let tmpMap = {};
xlsRowData.map(item => {
xlsHeader.map(v => {
if (v.hidden == null || v.hidden == undefined) {
if (v.excelType == null || v.excelType == undefined) {
Object.assign(tmpMap, { [v.header]: item[v.name] || '' });
} else if (v.excelType == 'number') {
if (v.excelFormatter == null || v.excelFormatter == undefined) {
Object.assign(tmpMap, {
[v.header]: parseFloat(item[v.name].replace(',', '')) || 0,
});
} else {
//Object.assign(tmpMap, { [v.header]: Utility.setFormatIntDecimal(item[v.name], v.excelFormatter)) || Utility.setFormatIntDecimal(0, v.excelFormatter))});
Object.assign(tmpMap, {
[v.header]:
parseFloat(
Utility.setFormatIntDecimal(
item[v.name],
v.excelFormatter,
).replace(',', ''),
) ||
parseFloat(
Utility.setFormatIntDecimal(0, v.excelFormatter).replace(
',',
'',
),
),
});
}
}
}
return tmpMap;
});
tmpData = tmpData.concat(tmpMap);
tmpMap = {};
});
this.xlsData = tmpData;
tmpData = null;
tmpMap = null;
xlsHeader.map(v => {
if (v.hidden == null || v.hidden == undefined) {
// this.xlsHeader.push(v.header);
this.xlsHeader.push(String(v.header));
}
});
},
async downloadExcelFile() {
if (!this.tableId) await this.setExcelData(); // 들어온 JSON 데이타 가공
// console.log("this.setExcelData()", this.setExcelData());
const fileName = this.pageData.xlsFileInfo[this.gridName].fileName;
const workBook = XLSX.utils.book_new(); // 새 시트 생성
const excelData = this.tableId
? // 테이블 그대로 가져올때
XLSX.utils.table_to_sheet(document.getElementById(this.tableId))
: // JSON 형식으로 가져올때
XLSX.utils.json_to_sheet(this.xlsData, { header: this.xlsHeader });
const sheetName = this.pageData.xlsFileInfo[this.gridName].sheetName;
XLSX.utils.book_append_sheet(workBook, excelData, sheetName); // 시트 명명, 데이터 지정
XLSX.writeFile(
workBook,
`${fileName ? fileName : this.menuNm.replace(/(\s*)/g, '')}.xlsx`,
); // 엑셀파일 만듬
this.xlsHeader = [];
},
},
};
</script>

87
components/common/button/BtnExcelUpload.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div id="btnExeclUpload">
<v-btn class="v-btn__round v-btn__excel" @click="uploadExcelFile">
<v-icon>mdi-file-excel</v-icon>
엑셀 로드
</v-btn>
</div>
</template>
<script>
import XLSX from 'xlsx';
import { mapState } from 'vuex';
export default {
name: 'btnExeclUpload',
props: {
parentPrgmId: {
type: String,
require: true,
},
gridName: {
type: String,
require: false,
},
dataPath: {
type: Object,
require: false,
default: null,
},
tableId: {
// 성성된 테이블 그대로 쓸 경우 그리드 컴포넌트에 id 지정 후 바인딩
type: String,
require: false,
default: null,
},
},
data() {
return {
xlsData: [],
};
},
computed: {
...mapState({
menuNm: state => state.activeMenuInfo.menuNm,
pageData(state) {
return state.pageData[this.parentPrgmId];
},
}),
},
methods: {
setExcelData() {
const xlsRowData = this.pageData[this.gridName].data;
const xlsHeader = this.pageData[this.gridName].column;
let tmpData = [];
let tmpMap = {};
xlsRowData.map(item => {
xlsHeader.map(v => {
return Object.assign(tmpMap, { [v.header]: item[v.name] || '' });
});
tmpData = tmpData.concat(tmpMap);
tmpMap = {};
});
this.xlsData = tmpData;
tmpData = null;
tmpMap = null;
},
async downloadExcelFile() {
if (!this.tableId) await this.setExcelData(); // 들어온 JSON 데이타 가공
const fileName = this.pageData.xlsFileInfo[this.gridName].fileName;
const workBook = XLSX.utils.book_new(); // 새 시트 생성
const excelData = this.tableId
? // 테이블 그대로 가져올때
XLSX.utils.table_to_sheet(document.getElementById(this.tableId))
: // JSON 형식으로 가져올때
XLSX.utils.json_to_sheet(this.xlsData);
const sheetName = this.pageData.xlsFileInfo[this.gridName].sheetName;
XLSX.utils.book_append_sheet(workBook, excelData, sheetName); // 시트 명명, 데이터 지정
XLSX.writeFile(
workBook,
`${fileName ? fileName : this.menuNm.replace(/(\s*)/g, '')}.xlsx`,
); // 엑셀파일 만듬
},
},
};
</script>

16
components/common/button/BtnRemoveRow.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<v-btn :ripple="false" @click="btnActionsFnc('remove')">삭제</v-btn>
</template>
<script>
export default {
props: {
myGrid: {
require: true,
},
btnActionsFnc: {
type: Function,
required: true,
},
},
};
</script>

16
components/common/button/BtnSave.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<v-btn :ripple="false" @click="btnActionsFnc('save')">저장</v-btn>
</template>
<script>
export default {
props: {
myGrid: {
require: true,
},
btnActionsFnc: {
type: Function,
required: true,
},
},
};
</script>

17
components/common/button/BtnSearch.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<v-btn :ripple="false" @click="getSearch('prev')">조회</v-btn>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations({ setPageData: 'setPageData' }),
getSearch() {
this.setPageData({ isFind: true });
},
},
};
</script>
<style scoped lang="scss" scoped></style>

27
components/common/button/BtnTotal.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<v-btn :ripple="false" @click="setTotal()">전체</v-btn>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
setTotal() {
var facInfoText = { path: '전체' };
this.setPageData({ facInfo: facInfoText });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(facInfoText),
);
},
},
};
</script>

67
components/common/button/Buttons.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<div>
<component
:is="buttonAuth.add ? 'BtnAddRow' : null"
:btnActionsFnc="btnActionsFnc"
/>
<component
:is="buttonAuth.remove ? 'BtnRemoveRow' : null"
:btnActionsFnc="btnActionsFnc"
/>
<component
:is="buttonAuth.save ? 'BtnSave' : null"
:btnActionsFnc="btnActionsFnc"
/>
<component
:is="buttonAuth.excel ? 'BtnExcelDownload' : null"
:parentPrgmId="parentPrgmId"
:gridName="bindingData"
/>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import BtnAddRow from './BtnAddRow';
import BtnRemoveRow from './BtnRemoveRow';
import BtnSave from './BtnSave';
import BtnExcelDownload from './BtnExcelDownload';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
bindingData: {
type: String,
require: true,
},
btnActionsFnc: {
type: Function,
required: true,
},
},
components: {
BtnAddRow,
BtnRemoveRow,
BtnSave,
BtnExcelDownload,
},
computed: {
...mapState({
buttonAuth(state) {
return state.pageData[this.parentPrgmId][this.bindingData].buttonAuth;
},
}),
},
data() {
return {};
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
getSearch() {
this.setPageData({ isFind: true });
},
},
};
</script>

97
components/common/eChart/EChart.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div class="chart-wrap">
<v-chart class="chart" :option="chartOption" autoresize />
</div>
</template>
<script>
import { mapState } from 'vuex';
import VChart from 'vue-echarts';
export default {
components: {
VChart,
},
props: {
chartData: {
type: Object,
default: () => {},
require: true,
},
isLegend: {
type: Boolean,
},
},
computed: {
...mapState({
isDarkMode: 'isDarkMode',
}),
chartOption() {
let chartOption = { ...this.option };
if (this.chartData) {
chartOption.xAxis.data = this.chartData.xAxis;
chartOption.series = this.chartData.series;
chartOption.toolbox = this.chartData.toolbox;
chartOption.dataZoom = this.chartData.dataZoom;
if (this.chartData.color) chartOption.color = this.chartData.color;
}
return chartOption;
},
},
data() {
return {
option: {
tooltip: {
trigger: 'axis',
confine: true,
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
top: '3%',
bottom: this.isLegend ? '30' : '0',
containLabel: true,
},
legend: this.isLegend
? {
top: 'bottom',
left: 'center',
textStyle: {
color: '#95A0A9',
fontSize: 10,
},
}
: null,
yAxis: {
type: 'value',
axisLabel: {
color: '#767D83',
fontSize: 10,
},
},
xAxis: {
type: 'category',
axisLabel: {
color: '#767D83',
fontSize: 10,
},
data: [], //xAxis text
},
series: [
{
name: '',
type: 'bar',
showBackground: true,
data: [],
},
],
},
};
},
created() {
// this.
},
};
</script>

30
components/common/eChart/LineA.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="chartLine" :style="`height: ${VChartHeight}`">
<v-chart class="chart" :option="chartOption" autoresize />
</div>
</template>
<script>
import VChart from 'vue-echarts';
export default {
components: {
VChart,
},
props: {
VChartHeight: {
require: true,
},
chartOption: {
type: Object,
default: () => {},
require: true,
},
},
data() {
return {
option: null,
};
},
};
</script>

30
components/common/eChart/LineB.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="chartLine" :style="`height: ${VChartHeight}`">
<v-chart class="chart" :option="chartOption" autoresize />
</div>
</template>
<script>
import VChart from 'vue-echarts';
export default {
components: {
VChart,
},
props: {
VChartHeight: {
require: true,
},
chartOption: {
type: Object,
default: () => {},
require: true,
},
},
data() {
return {
option: null,
};
},
};
</script>

31
components/common/eChart/LineC.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div
class="chartLine"
:style="`height: ${VChartHeight ? VChartHeight : '100%'}`"
>
<v-chart class="chart" :option="chartOption" autoresize />
</div>
</template>
<script>
import VChart from 'vue-echarts';
export default {
components: {
VChart,
},
props: {
VChartHeight: {
require: true,
},
chartOption: {
type: Object,
default: () => {},
require: true,
},
},
data() {
return {};
},
};
</script>

31
components/common/eChart/PieA.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="chartPie" :style="`height: ${VChartHeight}`">
<v-chart class="chart" :option="chartOption" autoresize />
</div>
</template>
<script>
import VChart from 'vue-echarts';
export default {
components: {
VChart,
},
props: {
VChartHeight: {
require: true,
},
chartOption: {
type: Object,
default: () => {},
require: true,
},
},
data() {
return {
option: null,
};
},
created() {},
};
</script>

30
components/common/eChart/PieB.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="chartPie" :style="`height: ${VChartHeight}`">
<v-chart class="chart" :option="chartOption" autoresize />
</div>
</template>
<script>
import VChart from 'vue-echarts';
export default {
components: {
VChart,
},
props: {
VChartHeight: {
require: true,
},
chartOption: {
type: Object,
default: () => {},
require: true,
},
},
data() {
return {
option: null,
};
},
};
</script>

153
components/common/form/CheckBox.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="item.label" cols="4">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
</label>
</v-col>
<v-col :cols="item.label ? 7 : ''">
<v-checkbox
v-model="chkValue"
style= "height: 36px; align-items: center;"
:disabled="disabledFlag"
:readonly="item.readonly || false"
:required="item.required || false"
:false-value="false"
:color="isDarkMode ? '#fff' : '#4777d9'"
@change="modifyValue"
></v-checkbox>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
bindingData: {
type: String,
require: false,
},
item: {
type: Object,
require: true,
},
// myGrid: {
// require: true
// }
},
data() {
return {
chkValue: false,
testData: false,
disabledFlag: false,
};
},
//rowGridSelectKey
computed: {
...mapState({
isDarkMode: state => state.isDarkMode,
myBindingData(state) {
// if(state.pageData[this.parentPrgmId]["rowGridSelectData"] != null){
// state.pageData[this.parentPrgmId]["rowGridSelectData"][this.item.valueNm] = state.pageData[this.parentPrgmId]["rowGridSelectData"][this.item.valueNm] == "1"? true : false;
// }
// return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
pageData(state) {
return state.pageData[this.parentPrgmId];
},
selectRow(state) {
return state.pageData[this.parentPrgmId][
this.bindingData + 'SelectKey'
];
},
}),
// checkValue: {
// get() {
// return this.myBindingData ? this.myBindingData[this.item.valueNm] : "";
// },
// set(value) {
// console.log(value);
// return value;
// // return this.setGridDataEdit({
// // gridKey: this.bindingData,
// // selectRow: this.selectRow,
// // objKey: this.item.valueNm,
// // value
// // // value: this.getKeyByValue(this.item.value, value)
// // });
// }
// },
// checkValue: {
// get() {
// return this.myBindingData[this.selectRow]
// ? this.item.value[
// this.myBindingData[this.selectRow][this.item.valueNm]
// ]
// : false;
// },
// set(value) {
// return this.setGridDataEdit({
// gridKey: this.bindingData,
// selectRow: this.selectRow,
// objKey: this.item.valueNm,
// value: this.getKeyByValue(this.item.value, value)
// });
// }
// }
},
watch: {
myBindingData: {
deep: true,
handler(val) {
if (val) {
this.chkValue = val[this.item.valueNm];
// 대상 유형이 'TAG' 일 때만 계산 여부 disabled 처리
if (
this.item.valueNm == 'calcFg' &&
val[this.item.disabledFg] == 'TAG'
) {
this.disabledFlag = true;
} else {
this.disabledFlag = this.item.disabled || false;
}
}
},
},
},
created() {},
methods: {
...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
// getKeyByValue(object, value) {
// // 추후 utility 로 빼야할 듯,, 값을 이용해서 키를 찾는 기능
// return Object.keys(object).find(key => object[key] === value);
// },
modifyValue(e) {
const dt = {
columnName: this.item.valueNm,
value: e,
};
this.$emit('gridEditingFinish', dt);
},
},
};
</script>
<style></style>

137
components/common/form/Form.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<v-row no-gutters>
<template v-for="(item, index) in detailList">
<v-col
v-if="!item.showValue"
:cols="item.cols"
:class="item.class"
:key="index"
>
<component
:is="item.type"
:parentPrgmId="parentPrgmId"
:item="item"
:myGrid="myGrid"
:bindingData="bindingData"
@gridEditingFinish="gridEditingFinish"
@inputClick="inputClick"
/>
</v-col>
</template>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import InputText from './InputText';
import InputNumber from './InputNumber';
import TextArea from './TextArea';
import SelectBox from './SelectBox';
import SelectBoxes from './SelectBoxes';
import CheckBox from './CheckBox';
import ChangeUserPswdPopPage from '../modal/ChangeUserPswdPopPage';
import EnrgReadPlacePop2Page from '../modal/EnrgReadPlacePop2Page';
import EnrgCostCenterPop from '../modal/EnrgCostCenterPop';
import ReadPlcPop from '../modal/ReadPlcPop';
import EvtObjPop from '../modal/EvtObjPop';
import FtnPlcFormPop from '../modal/FtnPlcFormPop';
import FtnPlcMultiFormPop from '../modal/FtnPlcMultiFormPop';
import ElecPowChrgPop from '../modal/ElecPowChrgPop';
import Label from './Label';
import BatchPop from '../modal/BatchPop';
import OnlnBasicUnitAddInfoPop from '../modal/OnlnBasicUnitAddInfoPop';
import EgrpPysclQtyPop from '../modal/EgrpPysclQtyPop';
import EqpmCalcPop from '../modal/EqpmCalcPop';
import EqpmBaseInfoPop from '../modal/EqpmBaseInfoPop';
import InputTextReg from './InputTextReg';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
detailList: {
type: Array,
require: false,
default: () => {
return [];
},
},
bindingData: {
type: String,
require: false,
},
myGrid: {
require: true,
},
},
components: {
InputText,
InputNumber,
TextArea,
SelectBox,
SelectBoxes,
CheckBox,
ChangeUserPswdPopPage,
EnrgReadPlacePop2Page,
EnrgCostCenterPop,
ReadPlcPop,
OnlnBasicUnitAddInfoPop,
ElecPowChrgPop,
EvtObjPop,
Label,
FtnPlcFormPop,
BatchPop,
FtnPlcMultiFormPop,
EgrpPysclQtyPop,
EqpmCalcPop,
EqpmBaseInfoPop,
InputTextReg
},
data() {
return {};
},
computed: {
...mapState({
rowGridSelectData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId].rowGridSelectData;
} else {
return state.pageData[this.parentPrgmId][this.bindingData]
.rowGridSelectData;
}
},
}),
},
created() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setGridSelectData: 'setGridSelectData',
}),
gridEditingFinish(data) {
const newData = {
[data.columnName]: data.value,
};
if (!this.bindingData) {
this.setPageData({
rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
});
} else {
this.setGridSelectData({
gridKey: this.bindingData,
rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
});
}
this.$emit('gridEditingFinish', data, this.bindingData);
},
inputClick(event, item, valueNm) {
this.$emit('inputClick', event, item, valueNm);
},
},
};
</script>
<style></style>

171
components/common/form/InputNumber.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="item.label" :cols="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
>
{{ item.label }}
<span v-if="item.essential">*</span>
</label>
</v-col>
<v-col :cols="item.label ? 7 : ''">
<!-- v-model="InputValue" -->
<v-text-field
v-model="textValue"
class="v-input__custom"
type=""
:disabled="
item.disabled ||
(item.elseDisabled &&
myBindingData &&
item.elseDisabled !== myBindingData.rowStat) ||
disabledCondition ||
false
"
outlined
:hide-details="true"
:readonly="item.readonly || false"
:required="item.required || false"
@keyup="modifyValue"
></v-text-field>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
bindingData: {
type: String,
require: false,
},
item: {
type: Object,
require: true,
},
// myGrid: {
// require: true
// }
},
data() {
return {
textValue: null,
};
},
computed: {
...mapState({
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
// selectRow(state) {
// return state.pageData[this.parentPrgmId][
// this.bindingData + "SelectKey"
// ];
// }
}),
getValue() {
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
},
// InputValue: {
// get() {
// // console.log(this.myBindingData);
// return this.myBindingData ? this.myBindingData[this.item.valueNm] : " ";
// },
// set(value) {
// let setVal = this.validateNumber(value);
// console.log("setVal", setVal);
// return this.newValue(setVal);
// }
// },
disabledCondition() {
if (this.myBindingData && this.item.disabledCondition) {
let isDisabled = false;
this.item.disabledCondition.forEach(condition => {
if (this.myBindingData[condition.dataKey] == condition.value) {
isDisabled = true;
}
});
return isDisabled;
} else {
return false;
}
},
},
watch: {
getValue() {
// this.textValue = this.validateNumber(this.getValue);
// this.textValue = this.validateNumber(this.getValue);
},
},
created() {
// console.log(this.bindingData);
},
methods: {
// ...mapMutations({ setGridDataEdit: "setGridDataEdit" }),
modifyValue(e) {
let val = e.target.value.replace(/[^-.0-9]/g, '');
console.log('val : ', val);
if(this.item.min != undefined && parseFloat(val) < this.item.min){
val = this.item.min;
}
if(this.item.max != undefined && parseFloat(val) > this.item.max){
val = this.item.max;
}
console.log('val2 : ', val);
this.textValue = val;
// this.textValue = this.validateNumber(val);
const dt = {
columnName: this.item.valueNm,
value: val,
// value: this.newValue(val),
};
this.$emit('gridEditingFinish', dt);
},
newValue(value) {
let returnVal = value;
if (this.item.decimalPlaces) {
const x = returnVal.replace('.', '');
const y = 10 ** -this.item.decimalPlaces;
let z = x * y;
// console.log(x * y);
if (z === 0) {
z = 10 ** -(this.item.decimalPlaces + 1);
}
// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
}
return returnVal;
},
validateNumber(value) {
let returnVal = String(value).replaceAll(',', '');
returnVal = Utility.setFormatInt(returnVal);
if (returnVal == 'NaN') returnVal = null;
return returnVal;
},
},
};
</script>
<style></style>

182
components/common/form/InputText.vue Normal file
View File

@ -0,0 +1,182 @@
<template>
<v-row v-if="!item.showValue" class="search-box" align="center" no-gutters>
<v-col
v-if="item.label"
:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
:style="item.padding ? 'padding-left:10px' : ''"
>
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
<span v-if="item.essential">*</span>
</label>
</v-col>
<v-col
v-if="!item.hideText"
:cols="item.textCols !== undefined ? item.textCols : item.label ? 7 : ''"
>
<v-text-field
v-model="InputValue"
class="v-input__custom"
outlined
:type="item.inputType || 'text'"
:min="item.min || ''"
:max="item.max || ''"
:onkeyup="item.onkeyup || ''"
:onkeydown="item.onkeydown || ''"
:hide-details="true"
:disabled="
item.disabled ||
(item.elseDisabled &&
myBindingData &&
item.elseDisabled !== myBindingData.rowStat) ||
disabledCondition ||
false
"
:readonly="
item.readonly ||
(item.elseReadonly &&
myBindingData &&
item.elseReadonly !== myBindingData.rowStat) ||
readonlyCondition ||
false
"
:required="item.required || false"
:placeholder="item.placeholder"
@input="modifyValue($event, item.valueNm)"
@click="onClick($event, item, item.valueNm)"
></v-text-field>
</v-col>
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
<label for="" class="search-box-label px-1">
({{ InputValue.length }} / {{ item.lengthCheck.maxLength }})
</label>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
bindingData: {
type: String,
require: false,
},
item: {
type: Object,
require: true,
},
// myGrid: {
// require: true
// }
},
data() {
return {};
},
computed: {
...mapState({
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
// selectRow(state) {
// return state.pageData[this.parentPrgmId][
// this.bindingData + "SelectKey"
// ];
// }
}),
InputValue: {
get() {
// console.log(this.myBindingData);
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
},
set(value) {
this.$emit('getValue', {
key: this.item.valueNm,
value: value,
});
return this.newValue(value);
},
},
disabledCondition() {
if (this.myBindingData && this.item.disabledCondition) {
let isDisabled = false;
this.item.disabledCondition.forEach(condition => {
if (this.myBindingData[condition.dataKey] == condition.value) {
isDisabled = true;
}
});
return isDisabled;
} else {
return false;
}
},
readonlyCondition() {
if (this.myBindingData && this.item.readonlyCondition) {
let isReadonly = false;
this.item.readonlyCondition.forEach(condition => {
if (this.myBindingData[condition.dataKey] == condition.value) {
isReadonly = true;
}
});
return isReadonly;
} else {
return false;
}
},
},
watch: {},
created() {
// console.log(this.bindingData);
},
methods: {
// ...mapMutations({ setGridDataEdit: "setGridDataEdit" }),
modifyValue(v, n) {
// console.log(this.newValue(v));
const dt = {
columnName: n,
// value: v.trim()
value: this.newValue(v),
};
this.$emit('gridEditingFinish', dt);
},
newValue(value) {
let returnVal = value.trim();
if (this.item.decimalPlaces) {
const x = returnVal.replace('.', '');
const y = 10 ** -this.item.decimalPlaces;
let z = x * y;
// console.log(x * y);
if (z === 0) {
z = 10 ** -(this.item.decimalPlaces + 1);
}
// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
}
return returnVal;
},
onClick(event, item, valueNm) {
this.$emit('inputClick', event, item, valueNm);
},
},
};
</script>
<style></style>

121
components/common/form/InputTextReg.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="item.label" :cols="item.labelCols">
<label for="" class="search-box-label">
<v-icon v-if="item.iconShow" x-small :color="item.required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
</label>
</v-col>
<v-col :cols="item.label ? item.textCols : ''">
<v-text-field
ref="formRef"
:value="InputValue"
class="v-input__custom"
:disabled="item.disabled"
:readonly="item.readonly"
outlined
:hide-details="true"
@keyup.enter="search"
@keydown="keydownEvent"
@keyup="keyupEvent"
@input="inputEvent($event, item.valueNm)"
:placeholder="item.placeholder"
></v-text-field>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
bindingData: {
type: String,
require: false,
},
item: {
type: Object,
require: true,
},
},
data() {
return {};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
InputValue: {
get() {
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
},
set(value) {
this.$emit('getValue', {
key: this.item.valueNm,
value: value,
});
return this.newValue(value);
},
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
search() {
if (this.searchOption === true) {
this.setPageData({ isFind: true });
}
},
inputEvent(str,n){
var temp = str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣\s]*/i)[0];
var regExp = /[^a-z]*/;
temp = temp.match(regExp)[0];
this.$refs.formRef.lazyValue = temp;
const dt = {
columnName : n,
value : this.newValue(this.$refs.formRef.lazyValue)
};
this.$emit('gridEditingFinish', dt);
},
keydownEvent($event){
},
keyupEvent($event){
},
newValue(value) {
let returnVal = value.trim();
if (this.item.decimalPlaces) {
const x = returnVal.replace('.', '');
const y = 10 ** -this.item.decimalPlaces;
let z = x * y;
// console.log(x * y);
if (z === 0) {
z = 10 ** -(this.item.decimalPlaces + 1);
}
// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
}
return returnVal;
},
},
};
</script>
<style></style>

36
components/common/form/Label.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="item.label" :cols="item.cols">
<label for="" class="search-box-label">
{{ item.label }}
</label>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
item: {
type: Object,
require: true,
},
},
data() {
return {};
},
computed: {
...mapState({}),
},
created() {},
methods: {},
};
</script>
<style></style>

127
components/common/form/SelectBox.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col
v-if="item.label"
cols="4"
:style="item.padding ? 'padding-left:10px' : ''"
>
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
</label>
</v-col>
<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
<v-select
v-model="selectValue"
:items="typeof item.list != 'string' ? item.list : myListData"
:item-text="typeof item.list != 'string' ? 'text' : item.itemText"
:item-value="typeof item.list != 'string' ? 'value' : item.itemValue"
outlined
:hide-details="true"
append-icon="mdi-chevron-down"
class="v-select__custom"
:disabled="item.disabled || false"
:readonly="item.readonly || false"
:required="item.required || false"
@change="modifyValue($event, item.valueNm)"
></v-select>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
bindingData: {
type: String,
require: false,
},
item: {
type: Object,
require: true,
},
// myGrid: {
// require: true
// }
},
data() {
return {};
},
computed: {
...mapState({
myListData(state) {
let list = [...state.pageData[this.parentPrgmId][this.item.list]];
list.forEach((item, idx) => {
if (item.commCdNm && item.commCdNm == '전체') {
list.splice(idx, 1);
}
if (this.item.addNull && idx == 0) {
list.unshift({
commCd: '',
commCdNm: '',
commCdAbbrnm: '',
commGrpCd: 'EM_ECC_KIND',
});
}
});
return list;
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
selectRow(state) {
return state.pageData[this.parentPrgmId][
this.bindingData + 'SelectKey'
];
},
}),
selectValue: {
get() {
return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
},
set(value) {
this.$emit('getValue', {
key: this.item.valueNm,
value: value,
});
return value;
// return this.setGridDataEdit({
// gridKey: this.bindingData,
// selectRow: this.selectRow,
// objKey: this.item.valueNm,
// value
// });
},
},
},
created() {},
methods: {
...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
modifyValue(v, n) {
const dt = {
columnName: n,
value: v,
};
this.$emit('gridEditingFinish', dt);
},
},
};
</script>
<style></style>

97
components/common/form/SelectBoxes.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="item.label" cols="4">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
<span v-if="item.essential">*</span>
</label>
</v-col>
<v-col :cols="item.label ? 8 : ''">
<v-row>
<template v-for="(groupItem, idx) in item.groups">
<v-col
:cols="groupItem.cols"
:class="groupItem.class"
:key="'SelectBoxes' + idx"
>
<template v-if="groupItem.text">
<span>{{ groupItem.text }}</span>
</template>
<template v-else>
<component
:is="'SelectBox'"
:parentPrgmId="parentPrgmId"
:item="groupItem"
@gridEditingFinish="gridEditingFinish"
/>
</template>
</v-col>
</template>
</v-row>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import SelectBox from './SelectBox';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
item: {
require: true,
},
bindingData: {
type: String,
require: false,
},
// gridEditingFinish: {
// // type: function
// // require: true
// }
},
components: {
SelectBox,
},
data() {
return {};
},
computed: {
...mapState({
rowGridSelectData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
gridEditingFinish(data) {
const newData = {
[data.columnName]: data.value,
};
this.setPageData({
rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
});
this.$emit('gridEditingFinish', data);
},
},
};
</script>
<style></style>

114
components/common/form/TextArea.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col
v-if="item.label"
:cols="item.cols == 12 ? 2 : 4"
:style="item.padding ? 'padding-left:10px' : ''"
>
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
<span v-if="item.essential">*</span>
</label>
<span v-if="item.maxlength" class="search-box-label body-2">
({{ InputValue ? InputValue.length : 0 }}/{{ item.maxlength }}자)
</span>
</v-col>
<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
<v-textarea
v-model="InputValue"
class="v-input__custom"
:rows="item.rows"
:disabled="
item.disabled ||
(item.elseDisabled &&
myBindingData &&
item.elseDisabled !== myBindingData.rowStat) ||
false
"
:readonly="
item.readonly ||
(item.elseReadonly &&
myBindingData &&
item.elseReadonly !== myBindingData.rowStat) ||
false
"
:required="item.required || false"
:maxlength="item.maxlength"
@input="modifyValue($event, item.valueNm)"
></v-textarea>
</v-col>
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
<label for="" class="search-box-label px-1">
({{ InputValue.length }} / {{ item.lengthCheck.maxLength }})
</label>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
},
},
data() {
return {};
},
computed: {
...mapState({
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId].rowGridSelectData;
} else {
return state.pageData[this.parentPrgmId][this.bindingData]
.rowGridSelectData;
}
},
}),
InputValue: {
get() {
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
},
set(value) {
this.$emit('getValue', {
key: this.item.valueNm,
value: value,
});
return value;
},
},
},
methods: {
...mapMutations({
setPageData: 'setPageData',
}),
modifyValue(v, n) {
const dt = {
columnName: n,
value: v,
};
this.$emit('gridEditingFinish', dt);
this.setPageData({ [n] : v})
},
},
};
</script>
<style></style>

72
components/common/input/InputCommGrpCd.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field v-model="InputValue" class="v-input__custom"></v-text-field>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
diffModel: {
type: String,
require: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {
label: '그룹코드',
};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
}),
InputValue: {
get() {
if (!this.diffModel) {
return this.searchParam[this.parentPrgmId].commGrpCd;
} else {
return this.searchParam[this.parentPrgmId][this.diffModel];
}
},
set(value) {
if (!this.diffModel) {
return this.setPageData({ commGrpCd: value });
} else {
return this.setPageData({ [this.diffModel]: value });
}
},
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
},
};
</script>
<style></style>

72
components/common/input/InputCommGrpCdNm.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field v-model="InputValue" class="v-input__custom"></v-text-field>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
diffModel: {
type: String,
require: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {
label: '그룹코드명',
};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
}),
InputValue: {
get() {
if (!this.diffModel) {
return this.searchParam[this.parentPrgmId].commGrpCdNm;
} else {
return this.searchParam[this.parentPrgmId][this.diffModel];
}
},
set(value) {
if (!this.diffModel) {
return this.setPageData({ commGrpCdNm: value });
} else {
return this.setPageData({ [this.diffModel]: value });
}
},
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
},
};
</script>
<style></style>

99
components/common/input/InputNumber.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field
v-model="textValue"
class="v-input__custom"
:disabled="disabled"
outlined
:hide-details="true"
@keyup="modifyValue"
></v-text-field>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
diffModel: {
type: String,
require: false,
},
label: {
type: String,
require: true,
},
valueNm: {
type: String,
require: true,
},
disabled: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {
textValue: null,
};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
}),
getValue() {
return this.searchParam[this.parentPrgmId][this.valueNm];
},
},
watch: {
getValue() {
this.textValue = this.validateNumber(this.getValue);
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
modifyValue(e) {
let val = e.target.value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
this.textValue = this.validateNumber(val);
if (!this.diffModel) {
this.setPageData({ [this.valueNm]: val });
}
},
validateNumber(value) {
let returnVal = String(value).replaceAll(',', '');
returnVal = Utility.setFormatInt(returnVal);
if (returnVal == 'NaN') returnVal = null;
return returnVal;
},
},
};
</script>
<style></style>

82
components/common/input/InputRmrk.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-textarea
v-model="InputValue"
class="v-input__custom"
:disabled="disabled"
></v-textarea>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
diffModel: {
type: String,
require: false,
},
label: {
type: String,
require: true,
default: '비고',
},
valueNm: {
type: String,
require: true,
},
disabled: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
}),
InputValue: {
get() {
return this.searchParam[this.parentPrgmId][this.valueNm];
},
set(value) {
if (!this.diffModel) {
return this.setPageData({ [this.valueNm]: value });
}
},
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
},
};
</script>
<style></style>

138
components/common/input/InputText.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon v-if="iconShow" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field
v-model="InputValue"
class="v-input__custom"
:disabled="disabled"
:readonly="readonly"
outlined
:hide-details="true"
@keyup.enter="search"
@keydown="keydownEvent"
@keyup="keyupEvent"
:placeholder="placeholder"
></v-text-field>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
diffModel: {
type: String,
require: false,
},
label: {
type: String,
require: true,
},
valueNm: {
type: String,
require: true,
},
disabled: {
type: Boolean,
require: false,
default: false,
},
readonly: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
searchOption: {
type: Boolean,
require: false,
},
required: {
type: Boolean,
require: false,
default: false,
},
iconShow:{
type:Boolean,
require:false,
default:true
},
replaceList:{
type:Array,
require:false,
default:null
},
placeholder:{
type:String,
require:false
}
},
data() {
return {};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
}),
InputValue: {
get() {
return this.searchParam[this.parentPrgmId][this.valueNm];
},
set(value) {
if (!this.diffModel) {
if(this.replaceList){
for(var i=0; i<this.replaceList; i++){
value.replaceAll(this.replaceList[i]);
}
}
return this.setPageData({ [this.valueNm]: value });
}
},
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
search() {
if (this.searchOption === true) {
this.setPageData({ isFind: true });
}
},
keydownEvent($event){
},
keyupEvent($event){
if(this.replaceList){
for(var i=0; i<this.replaceList.length; i++){
this.InputValue = this.InputValue.replaceAll(this.replaceList[i], '');
}
}
this.setPageData({ [this.valueNm]: this.InputValue });
}
},
};
</script>
<style></style>

84
components/common/input/InputTextPassword.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field
v-model="InputValue"
class="v-input__custom"
:disabled="disabled"
type="password"
outlined
:hide-details="true"
></v-text-field>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
diffModel: {
type: String,
require: false,
},
label: {
type: String,
require: true,
},
valueNm: {
type: String,
require: true,
},
disabled: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
data() {
return {};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
}),
InputValue: {
get() {
return this.searchParam[this.parentPrgmId][this.valueNm];
},
set(value) {
if (!this.diffModel) {
return this.setPageData({ [this.valueNm]: value });
}
},
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
},
};
</script>
<style></style>

164
components/common/input/InputTextReg.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon v-if="iconShow" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field
ref="formRef"
:value="InputValue"
class="v-input__custom"
:disabled="disabled"
:readonly="readonly"
outlined
:hide-details="true"
@keyup.enter="search"
@keydown="keydownEvent"
@keyup="keyupEvent"
@input="inputEvent"
:placeholder="placeholder"
></v-text-field>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
diffModel: {
type: String,
require: false,
},
label: {
type: String,
require: true,
},
valueNm: {
type: String,
require: true,
},
disabled: {
type: Boolean,
require: false,
default: false,
},
readonly: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
searchOption: {
type: Boolean,
require: false,
},
required: {
type: Boolean,
require: false,
default: false,
},
iconShow:{
type:Boolean,
require:false,
default:true
},
replaceList:{
type:Array,
require:false,
default:null
},
placeholder:{
type:String,
require:false
}
},
data() {
return {};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
}),
InputValue: {
get() {
return this.searchParam[this.parentPrgmId][this.valueNm];
},
set(value) {
if (!this.diffModel) {
if(this.replaceList){
for(var i=0; i<this.replaceList; i++){
value.replaceAll(this.replaceList[i]);
}
}
return this.setPageData({ [this.valueNm]: value });
}
},
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
search() {
if (this.searchOption === true) {
this.setPageData({ isFind: true });
}
},
inputEvent(str){
// console.log("str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|0-9\s]*/i):",str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|0-9\s]*/i))
var temp = str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|0-9\s]*/i)[0];
var regExp = /[^a-z]*/;
temp = temp.match(regExp);
this.$refs.formRef.lazyValue = temp;
},
keydownEvent($event){
// if(this.replaceList){
// console.log("event : ",$event)
// // console.log("InputValue : ", this.InputValue);
// // // var regExp = /[A-Z]/;
// var regExp = /^[0-9a-z\s]/
// if(regExp.test($event.key)){
// // if($event.code == 'ShiftLeft')
// // console.log("test", regExp)
// // if($event.key){
// this.InputValue = this.InputValue.replaceAll(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '');
// $event.preventDefault();
// }
// // }
// this.InputValue = this.InputValue.replaceAll(this.replaceList[0], '');
// for(var i=0; i<this.replaceList.length; i++){
// this.InputValue = this.InputValue.replaceAll(this.replaceList[i], '');
// }
// }
// this.setPageData({ [this.valueNm]: this.InputValue });
},
keyupEvent($event){
}
},
};
</script>
<style></style>

144
components/common/input/InputTextRegEx.vue Normal file
View File

@ -0,0 +1,144 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field
v-model="InputValue"
class="v-input__custom"
:disabled="disabled"
outlined
:hide-details="true"
:maxLength="maxLength"
:placeholder="placeholder"
@keyup.enter="search"
></v-text-field>
<div v-if="regExBool" style="color:red">{{ validCheckText }}</div>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
diffModel: {
type: String,
require: false,
},
label: {
type: String,
require: true,
},
valueNm: {
type: String,
require: true,
},
disabled: {
type: Boolean,
require: false,
default: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
searchOption: {
type: Boolean,
require: false,
},
required: {
type: Boolean,
require: false,
default: false,
},
regEx: {
type: RegExp,
require: false,
},
maxLength: {
type: Number,
require: false,
},
placeholder: {
type: String,
require: false,
},
validCheckText: {
type: String,
require: false,
},
},
data() {
return {
regExBool: false,
};
},
computed: {
...mapState({
searchParam: state => state.pageData,
menuData: 'menuData',
}),
InputValue: {
get() {
return this.searchParam[this.parentPrgmId][this.valueNm];
},
set(value) {
if (!this.diffModel) {
return this.setPageData({ [this.valueNm]: value });
}
},
},
},
watch: {
InputValue(value) {
if (value != '') {
this.checkRegEx();
}
},
},
created() {},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
search() {
if (this.searchOption === true) {
this.setPageData({ isFind: true });
}
},
checkRegEx() {
var phonRegExp = this.regEx;
if (!phonRegExp.test(this.InputValue)) {
this.regExBool = true;
this.$emit('regExCheck' + this.valueNm, {
valueNm: this.valueNm,
flag: false,
});
} else {
this.regExBool = false;
this.$emit('regExCheck' + this.valueNm, {
valueNm: this.valueNm,
flag: true,
});
}
},
},
};
</script>
<style></style>

137
components/common/modal/AlertPopup.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div>
<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
<v-dialog
v-model="dialog"
width="480"
overlay-color="#000"
overlay-opacity="0.8"
>
<v-card>
<v-toolbar
:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
class="py-4 pr-3 pl-5"
height="auto"
>
<v-toolbar-title>{{ label }}</v-toolbar-title>
<v-btn
icon
tile
small
:ripple="false"
@click="dialog = !dialog"
:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<v-card-text class="text-center py-10">
{{ computedMessage }}
</v-card-text>
<v-card-actions class="justify-center">
<v-btn :ripple="false" @click="clickOk()">확인</v-btn>
<v-btn v-if="confirm" :ripple="false" @click="clickCancle()"
>취소</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
props: {
message: {
type: String,
default:
'시스템 에러가 발생하였습니다.<br /> 동일문제가 계속 발생할 경우 전산담당자에게 문의하세요.<br /> 불편을 드려 죄송합니다.<br /><br /> [에러내용] java.lang.OutOfMemoryError: GC overhead limit exceeded',
},
parentPrgmId: {
type: String,
require: true,
},
item: {
type: Object,
require: true,
},
label: {
type: String,
require: true,
},
message: {
type: String,
require: true,
},
confirm: {
type: Object,
require: false,
},
},
data() {
return {
dialog: false,
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
computedMessage() {
if (this.item != undefined && this.item != null) {
return this.item.message;
} else {
return this.message;
}
},
},
watch: {
async chkDialog(val) {
if (val) {
//console.log('this.item : ', this.item);
}
},
},
methods: {
...mapMutations({
setPageData: 'setPageData',
}),
clickOk() {
if (this.parentPrgmId) {
// this.$emit('yesNo',true);
this.setPageData({ AlertPopData: true });
}
this.dialog = !this.dialog;
},
clickCancle() {
this.setPageData({ AlertPopData: false });
this.dialog = !this.dialog;
},
},
};
</script>
<style scoped lang="scss">
::v-deep {
.v-toolbar__content {
justify-content: space-between;
padding: 0;
.v-btn {
margin-right: 0 !important;
}
}
.v-card__actions {
padding-bottom: 30px !important;
}
}
</style>

412
components/common/modal/BatchPop.vue Normal file
View File

@ -0,0 +1,412 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</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-col>
<v-dialog v-model="dialog" scrollable width="540px">
<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-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"
placeholder="배치명을 입력하세요."
@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>
<div :style="'height: calc(50vh)'">
<!-- <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)"
/>
</div>
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '이벤트항목',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '이벤트항목',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
},
// bindingFlag:{
// type:Boolean,
// require: false,
// default: false
// }
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'evtObjPop',
modalDataKey: 'modalData2',
searchWord: '',
selectedData: {},
textFieldData: '',
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
},
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { evtObjPop },
});
},
created() {
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: '배치 ID', name: 'batchId', align: 'center', width: 150 },
{ header: '배치명', name: 'batchNm', align: 'left' },
],
});
},
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectBatchMng',
resKey: 'batchMngData',
sendParam: {
useFg: '1',
batchNm: this.searchWord,
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
this.dialog = false;
if (!this.item) {
this.textFieldData = this.selectedData.batchId;
} else {
if (this.item.bindNm) {
this.myBindingData[this.item.bindNm] = this.selectedData.batchNm;
} else {
this.myBindingData.batchNm = this.selectedData.batchNm;
}
const dt = {
columnName: this.item.valueNm,
value: this.selectedData.batchId,
};
this.$emit('gridEditingFinish', dt);
if (this.item.valueNm2 !== undefined) {
const dt = {
columnName: this.item.valueNm2,
value: this.selectedData[this.item.valueNm2],
};
this.$emit('gridEditingFinish', dt);
}
if (this.item.bindNm !== undefined) {
const dt = {
columnName: this.item.bindNm,
value: this.selectedData.batchNm,
};
this.$emit('gridEditingFinish', dt);
}
}
},
dialogOpenCloseEvent(val) {
// if(this.item && this.item.disableContent){
// this.dialog = false;
// return;
// }
this.dialog = !val;
},
},
};
var evtObjPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

194
components/common/modal/ChangePswdPop.vue Normal file
View File

@ -0,0 +1,194 @@
<template>
<div>
<v-dialog
v-model="dialog"
width="400"
overlay-color="#000"
overlay-opacity="0.8"
>
<v-card style="height: 100%">
<v-card-title>
<span class="custom-title-4">비밀번호 변경</span>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<v-col>
<label for="" class="search-box-label">
현재 비밀번호를 입력하세요
</label>
<v-text-field
v-model.trim="curPswd"
class="v-input__custom"
type="password"
:readonly="!isFocused"
@focus="isFocused = true"
@blur="isFocused = false"
@keyup.enter="setUpdate()"
></v-text-field>
</v-col>
<v-col>
<label for="" class="search-box-label">
변경할 비밀번호를 입력하세요
</label>
<v-text-field
v-model.trim="firstPswd"
class="v-input__custom"
type="password"
:readonly="!isFocused"
@focus="isFocused = true"
@blur="isFocused = false"
@keyup.enter="setUpdate()"
></v-text-field>
</v-col>
<v-col>
<label for="" class="search-box-label">
변경할 비밀번호를 다시 입력하세요
</label>
<v-text-field
v-model.trim="secondPswd"
class="v-input__custom"
type="password"
:readonly="!isFocused"
@focus="isFocused = true"
@blur="isFocused = false"
@keyup.enter="setUpdate()"
></v-text-field>
</v-col>
</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 = !dialog">닫기</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import $cookie from 'vue-cookie';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
item: {
type: Object,
require: true,
},
comId: {
type: String,
require: true,
},
},
components: {},
data() {
return {
dialog: false,
curPswd: null,
firstPswd: null,
secondPswd: null,
isFocused: false,
changeRow: false,
logoutUrl: '/login',
};
},
computed: {
...mapState({}),
chkDialog() {
return this.dialog;
},
},
watch: {
async chkDialog(val) {
//console.log("watch : ", val)
if (val) {
this.openDialog();
this.$nextTick(() => {});
} else {
}
},
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({
postUpdateApi: 'modules/list/postUpdateApi',
postApiReturn: 'modules/list/postApiReturn',
}),
async openDialog() {
this.curPswd = null;
this.firstPswd = null;
this.secondPswd = null;
},
async setUpdate() {
if (!this.curPswd || !this.firstPswd || !this.secondPswd) {
alert('비밀번호를 입력해주세요.');
} else if (this.firstPswd !== this.secondPswd) {
alert('입력한 비밀번호가 다릅니다.');
this.firstPswd = null;
this.secondPswd = null;
} else {
var encryptedCurPassword = await sha512(this.curPswd);
let res = await this.postApiReturn({
apiKey: 'selectComparePswd',
resKey: 'roleUserData',
sendParam: {
userPswd: encryptedCurPassword,
},
});
if (res[0].userCompare == 'FALSE') {
alert('현재 비밀번호가 일치하지 않습니다.');
} else {
var encryptedPassword = await sha512(this.firstPswd);
const sendParam = {
datas: {
dsUser: [
{
userPswd: encryptedPassword,
},
],
},
params: {},
};
// console.log(sendParam);
await this.postUpdateApi({
apiKey: 'updatePswd',
sendParam: sendParam,
});
alert(
'비밀번호가 변경되었습니다. 로그아웃 후 새로운 비밀번호로 재 로그인 바랍니다.',
);
this.dialog = false;
$cookie.delete('FEMS_SESSION');
this.$nextTick(() => {
window.location.href = this.logoutUrl + '?' + this.comId;
});
}
}
},
},
};
function sha512(str) {
const crypto = require('crypto');
return crypto
.createHash('sha512')
.update(str)
.digest('hex');
}
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

224
components/common/modal/ChangeUserPswdPopPage.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="item.label" :cols="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
>
{{ item.label }}
</label>
<!-- <label for="" class="search-box-label ft-size_14 ft-clr_g-c">
{{ item.label }}
</label> -->
</v-col>
<v-col :cols="item.label ? 7 : ''">
<template v-if="myBindingData && myBindingData.rowStat === 'I'">
<v-text-field
v-model.trim="InputValue"
class="v-input__custom"
type="password"
outlined
@focus="isFocused = true"
@blur="isFocused = false"
@input="modifyValue($event, item.valueNm)"
:hide-details="true"
></v-text-field>
</template>
<template v-else>
<v-btn :ripple="false" @click="dialog = !dialog">
<!-- <v-icon>mdi-content-save</v-icon> -->
<span>비밀번호 {{ isPassword }}</span>
</v-btn>
</template>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<v-card style="height: 100%">
<v-card-title>
<span class="custom-title-4">비밀번호 {{ isPassword }}</span>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<v-col>
<label for="" class="search-box-label">
{{ isPassword }}할 비밀번호를 입력하세요
</label>
<v-text-field
v-model.trim="firstPswd"
class="v-input__custom"
type="password"
:readonly="!isFocused"
@focus="isFocused = true"
@blur="isFocused = false"
></v-text-field>
</v-col>
<v-col>
<label for="" class="search-box-label">
{{ isPassword }}할 비밀번호를 다시 입력하세요
</label>
<v-text-field
v-model.trim="secondPswd"
class="v-input__custom"
type="password"
:readonly="!isFocused"
@focus="isFocused = true"
@blur="isFocused = false"
></v-text-field>
</v-col>
</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="close()">닫기</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
item: {
type: Object,
require: true,
},
},
data() {
return {
dialog: false,
firstPswd: null,
secondPswd: null,
isFocused: false,
changeRow: false,
};
},
computed: {
...mapState({
myBindingData(state) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
},
myRowGridSelectKey(state) {
return state.pageData[this.parentPrgmId]['rowGridSelectKey'];
},
}),
isPassword() {
return this.myBindingData && this.myBindingData.pwBk ? '변경' : '등록';
},
chkRowGridSelectKey() {
return this.myRowGridSelectKey;
},
InputValue: {
get() {
let value = null;
if (this.myBindingData) {
if (this.myBindingData[this.item.valueNm] !== null)
value = this.myBindingData[this.item.valueNm];
}
if (
this.myBindingData &&
this.myBindingData.rowStat === 'I' &&
this.changeRow
) {
this.changeRow = false;
return this.isFocused || value !== null ? value : '';
} else {
return '';
}
},
set(value) {
return value;
},
},
},
watch: {
chkRowGridSelectKey(val, oldVal) {
// if (val) this.search();
if (oldVal !== '' && val !== oldVal) this.changeRow = true;
else this.changeRow = false;
},
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({ postUpdateApi: 'modules/list/postUpdateApi' }),
modifyValue(v, n) {
const dt = {
columnName: n,
value: v,
};
this.$emit('gridEditingFinish', dt);
},
async setUpdate() {
if (!this.firstPswd || !this.secondPswd) {
alert('비밀번호를 입력해주세요.');
} else if (this.firstPswd !== this.secondPswd) {
alert('입력한 비밀번호가 다릅니다.');
this.firstPswd = null;
this.secondPswd = null;
} else {
var encryptedPassword = await sha512(this.firstPswd);
const sendParam = {
datas: {
dsUser: [
{
userNo: this.myBindingData.userNo,
userPswd: encryptedPassword,
// userPswd: this.firstPswd,
rowStat: 'U',
},
],
},
params: {},
};
// console.log(sendParam);
await this.postUpdateApi({
apiKey: 'saveUser',
sendParam: sendParam,
});
alert('저장되었습니다.');
this.dialog = false;
this.setPageData({ isFind: true });
this.firstPswd = null;
this.secondPswd = null;
}
},
async close() {
this.dialog = false;
this.firstPswd = null;
this.secondPswd = null;
},
},
};
function sha512(str) {
// return crypto.subtle.digest("SHA-512", new TextEncoder("utf-8").encode(str)).then(buf => {
// return Array.prototype.map.call(new Uint8Array(buf), x=>(('00'+x.toString(16)).slice(-2))).join('');
// });
const crypto = require('crypto');
return crypto
.createHash('sha512')
.update(str)
.digest('hex');
}
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

444
components/common/modal/DrSimulSlctPop.vue Normal file
View File

@ -0,0 +1,444 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="4">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-dialog
ref="popModal"
v-model="dialog"
width="700"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ label }}</span>
<v-btn icon tile :ripple="false" @click="dialog = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<div class="searchFilter v-card">
<v-row align="center" no-gutters>
<v-col :cols="6">
<component
:is="'selectSnarEnergy'"
:parentPrgmId="parentPrgmId"
:label="'에너지원'"
:dataKey="'snarEnergyCd'"
:addAll="true"
:labelCols="4"
/>
</v-col>
<v-col :cols="5">
<v-row align="center" no-gutters>
<v-col cols="4">
<label class="search-box-label"
><v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>시나리오 명</label
>
</v-col>
<v-col :cols="7">
<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-col>
</v-row>
<!-- <InputText
:parentPrgmId="parentPrgmId"
label="시나리오명"
valueNm="snarNm"
:searchOption="true"
:labelCols="4"
:textCols="7"
/> -->
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="8">
<DatePicker
:parentPrgmId="parentPrgmId"
:label="'실행일자'"
:labelCols="3"
/>
</v-col>
<v-col :cols="4" class="text-right">
<v-btn :ripple="false" @click="reset()">초기화</v-btn>
<v-btn :ripple="false" @click="search()">검색</v-btn>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div ref="snargridParent" class="py-3" style="height:400px">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid ? 'Grid' : null"
:dataPath="searchParam.modalData.selectSnarPrgm"
:parentPrgmId="parentPrgmId"
:gridName="gridName"
@getRowsData="getRowData"
/>
</div>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialog = false">닫기</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import DatePicker from '~/components/common/Datepicker';
import Buttons from '~/components/common/button/Buttons';
import Utility from '~/plugins/utility';
import SelectSnarEnergy from '@/components/common/select/SelectSnarEnergy';
import InputText from '@/components/common/input/InputText';
import Grid from '~/components/common/Grid';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: true,
},
},
components: {
InputText,
DatePicker,
Buttons,
Utility,
SelectSnarEnergy,
InputText,
Grid,
},
data() {
return {
dialog: false,
myModalKey: 'selectSnarPrgm',
loadGrid: false,
gridName: 'snarGrid',
modalDataKey: 'modalData',
activeRowData: {},
checkedRowDataList: [],
searchWord: '',
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
selectValue() {
// 선택된 시나리오 값
const temp = [];
const snarData = this.searchParam.isMulti
? this.searchParam.snarInfoList
: this.searchParam.snarInfo;
console.log('this.searchParam.isMulti', this.searchParam.isMulti);
console.log(
'this.searchParam.snarInfoList',
this.searchParam.snarInfoList,
);
console.log('this.searchParam.snarInfo', this.searchParam.snarInfo);
if (Array.isArray(snarData)) {
if (snarData.length > 0) {
for (const item of snarData) {
temp.push(item.simulId);
}
}
} else {
//return snarData.path === undefined ? snarData.simulId : snarData.path;
}
return temp.join();
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
chkSnarEnergy() {
return this.searchParam.snarEnergyCd;
},
chkFromDt() {
// 조회기간 시작일 선택 감지
return this.searchParam.fromDt;
},
chkToDt() {
// 조회기간 종료일 선택 감지
return this.searchParam.toDt;
},
},
watch: {
async chkDialog(val) {
if (val) this.search();
},
async chkSnarEnergy(val) {
if (val) this.search();
},
async chkFromDt(val) {
if (val) this.search();
},
async chkToDt(val) {
if (val) this.search();
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectSnarPrgm },
});
},
created() {
this.init();
if (this.searchParam.isMulti == true) {
this.setPageData({
snarInfoList:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
} else {
this.setPageData({
snarInfo:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
}
// if(this.searchParam.isMulti == true){
// this.setPageData({
// snarInfoList : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
search() {
this.getSnarData();
},
init() {
this.activeRowData = {};
this.gridInit();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
const _this = this;
// const myOptionsSnar = {
// snarColumnOptions: {
// name: "simulId",
// useIcon: true
// },
// scrollX: true
// };
if (this.searchParam.isMulti) {
myOptions['rowHeaders'] = [{ type: 'checkbox' }];
myOptions['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
// myOptionsSnar["snarColumnOptions"]["useCascadingCheckbox"] = false;
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(
Utility.defaultGridOption(350, myOptions),
myOptions,
),
});
const myColumnsSnar = [
{
header: '실행일자',
name: 'calcDt',
align: 'center',
formatter: dateFormatter,
},
{ header: '시나리오명', name: 'snarNm', align: 'center' },
{ header: '완료여부', name: 'exctFg', align: 'center' },
];
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumnsSnar,
});
},
async getSnarData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectSimulSlctList',
resKey: 'selectSimulSlctList',
sendParam: {
snarNm: this.searchWord, // 검색키워드: 시나리오명
ercId: this.searchParam.snarEnergyCd, // 검색키워드: 에너지원
fromDt: this.searchParam.fromDt, // 검색키워드: 시작일자
toDt: this.searchParam.toDt, // 검색키워드: 끝일자
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
//화면 처음 열때 Default 체크 처리
if (localStorage.getItem(this.parentPrgmId + 'CheckedRow') == null) {
let temp = [];
res.filter(item => {
if (item.mntrFg == 1) {
temp.push(item);
}
});
this.searchParam.snarInfoList = temp;
}
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows(res);
}
});
},
setGridCheckedRows(res) {
this.checkedRowDataList =
this.searchParam.snarInfoListSearch.length > 0
? this.searchParam.snarInfoListSearch
: [];
if (this.checkedRowDataList.length > 0) {
if (res.length > 0) {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
//if(res[i].simulId == this.checkedRowDataList[i].simulId){
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs[this.gridName + this.parentPrgmId],
);
//}
}
}
}
},
getRowData(data) {
if (this.searchParam.isMulti) {
if (data._attributes.checked) {
this.$refs[this.gridName + this.parentPrgmId].uncheckEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
} else {
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
if (this.searchParam.isMulti) {
this.checkedRowDataList = this.$refs[
this.gridName + this.parentPrgmId
].getCheckedRowsEvt();
if (this.checkedRowDataList.length < 20) {
this.dialog = false;
this.setPageData({ snarInfoList: this.checkedRowDataList });
this.setPageData({ snarInfoListSearch: this.checkedRowDataList });
} else {
alert('선택 목록이 20개를 초과하였습니다.');
}
} else {
this.dialog = false;
this.setPageData({ snarinfo: this.activeRowData });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.simulId),
);
}
},
reset() {
for (
var i = 0;
i < this.$refs[this.gridName + this.parentPrgmId].getData().length;
i++
) {
this.$refs[this.gridName + this.parentPrgmId].uncheckEvt(
this.$refs[this.gridName + this.parentPrgmId].getData()[i],
this.$refs[this.gridName + this.parentPrgmId],
);
}
},
typeEnterKey() {
this.search();
},
},
};
const selectSnarPrgm = {
snarGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
function dateFormatter({ value }) {
return Utility.setFormatDate(value, 'YYYY-MM-DD');
}
</script>
<style scoped lang="scss">
@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>

499
components/common/modal/DrSnarExecPop.vue Normal file
View File

@ -0,0 +1,499 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="4">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-dialog
ref="popModal"
v-model="dialog"
width="600"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ label }}</span>
<v-btn icon tile :ripple="false" @click="btnAction('close')">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<!-- <v-card-actions> -->
<div class="pa-5">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="3">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
실행 일자
</label>
</v-col>
<v-col :cols="9">
<div class="calcDtpicker-container">
<v-text-field
id="calcDtpicker"
ref="calcDtpicker"
v-model="calcDt"
:class="'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div
ref="calcDtpicker-container"
id="calcDtpicker-container"
></div>
</template>
</v-text-field>
</div>
</v-col>
</v-row>
</div>
<!-- </v-card-actions> -->
<span class="pa-4">고급옵션</span>
<div class="px-5 pb-4">
<v-row class="search-box py-2" align="center" no-gutters>
<v-col :cols="3">
<label class="search-box-label">
<v-icon x-small color="#fb8200" class="mr-1"
>mdi-record-circle</v-icon
>
CBL days
</label>
</v-col>
<v-col :cols="9">
<v-text-field
v-model="cblClacDays"
class="v-input__custom"
outlined
:hide-details="true"
></v-text-field>
</v-col>
</v-row>
<v-row class="search-box py-2" align="center" no-gutters>
<v-col :cols="3">
<label class="search-box-label">
<v-icon x-small color="#fb8200" class="mr-1"
>mdi-record-circle</v-icon
>
MIN/MAX days
</label>
</v-col>
<v-col :cols="9">
<v-text-field
v-model="minMaxDays"
class="v-input__custom"
outlined
:hide-details="true"
></v-text-field>
</v-col>
</v-row>
<v-row class="search-box py-2" align="center" no-gutters>
<v-col :cols="3">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
제외 일자
</label>
</v-col>
<v-col :cols="7">
<div class="exclDtpicker-container">
<v-text-field
id="exclDtpicker"
ref="exclDtpicker"
v-model="exclDt"
:class="'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div
ref="exclDtpicker-container"
id="exclDtpicker-container"
></div>
</template>
</v-text-field>
</div>
</v-col>
<v-col :cols="2">
<v-btn :ripple="false" @click="btnAction('add')">추가</v-btn>
</v-col>
</v-row>
<div
id="exclDtListValDiv"
class="px-5 mb-1 h100"
style="overflow-y: auto; max-height:72px"
></div>
</div>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark :ripple="false" @click="btnAction('save')"
>확인</v-btn
>
<v-btn
color="primary"
dark
:ripple="false"
@click="btnAction('close')"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import InputText from '~/components/common/form/InputText';
import Label from '~/components/common/form/Label';
import TuiDatepicker from 'tui-date-picker';
import Buttons from '~/components/common/button/Buttons';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: true,
},
},
components: {
InputText,
Label,
TuiDatepicker,
Buttons,
Utility,
},
data() {
return {
dialog: false,
snarComId: null,
snarId: null,
simulId: null,
calcDt: this.convertStringToDateFormat(new Date()),
exclDt: this.convertStringToDateFormat(new Date()),
calcDtDatepickerInstance: null,
exclDtDatepickerInstance: null,
cblClacDays: null,
minMaxDays: null,
exclDtListData: null,
exclDtListVal: [],
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
},
watch: {
async chkDialog(val) {
if (val) {
this.openDialog();
} else {
}
},
},
created() {
window.exclDtDel = this.exclDtDel;
},
mounted() {
//this.tuiCalendarInit();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
}),
...mapActions({
postUpdateApi: 'modules/list/postUpdateApi',
}),
tuiCalendarInit() {
const calcDtContainer = document.getElementById('calcDtpicker-container');
const calcDtTarget = document.getElementById('calcDtpicker');
const exclDtContainer = document.getElementById('exclDtpicker-container');
const exclDtTarget = document.getElementById('exclDtpicker');
this.calcDtDatepickerInstance = new TuiDatepicker(calcDtContainer, {
date: new Date(),
language: 'ko',
type: 'date',
input: {
element: calcDtTarget,
format: 'yyyy-MM-dd',
},
timePicker: false,
calendar: {
showToday: false,
},
});
this.exclDtDatepickerInstance = new TuiDatepicker(exclDtContainer, {
date: new Date(),
language: 'ko',
type: 'date',
input: {
element: exclDtTarget,
format: 'yyyy-MM-dd',
},
timePicker: false,
calendar: {
showToday: false,
},
});
// datepicker 초기값 생성
this.calcDtDatepickerInstance.setDate(new Date());
this.exclDtDatepickerInstance.setDate(new Date());
// datepicker 초기값 생성 끝
// datepicker 변경시 이벤트 추가
this.calcDtDatepickerInstance.on('change', () => this.getCalcDt());
this.exclDtDatepickerInstance.on('change', () => this.getExclDt());
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
},
getCalcDt() {
const dt = this.calcDtDatepickerInstance.getDate();
//this.calcDt = dt.toISOString().substr(0, 10);
this.calcDt = Utility.setFormatDate(dt, 'YYYY-MM-DD');
},
getExclDt() {
const dt = this.exclDtDatepickerInstance.getDate();
this.exclDt = Utility.setFormatDate(dt, 'YYYY-MM-DD');
//this.exclDt = dt.toISOString().substr(0, 10);
},
convertStringToDateFormat(val) {
var result = '';
result = Utility.setFormatDate(val, 'YYYY-MM-DD');
return result;
},
async openDialog() {
this.cblClacDays = null;
this.minMaxDays = null;
this.calcDt = Utility.setFormatDate(new Date(), 'YYYY-MM-DD');
this.exclDt = Utility.setFormatDate(new Date(), 'YYYY-MM-DD');
this.exclDtListVal = [];
this.$nextTick(() => {
this.tuiCalendarInit();
});
},
async btnAction(action) {
switch (action) {
case 'close':
this.dialog = !this.dialog;
document.getElementById('exclDtListValDiv').innerHTML = '';
break;
case 'save':
if (this.cblClacDays == null || this.minMaxDays == null) {
alert('필수값을 입력해주세요.');
} else {
await this.insertDetail();
this.dialog = !this.dialog;
document.getElementById('exclDtListValDiv').innerHTML = '';
}
break;
case 'add':
var chkVal = true;
for (var j = 0; j < this.exclDtListVal.length; j++) {
if (this.exclDtListVal[j] == this.exclDt.substr(0, 10))
chkVal = false;
}
if (!chkVal) {
alert('같은 날짜가 있습니다.');
} else {
this.exclDtListVal.push(this.exclDt.substr(0, 10));
var tmp = '';
for (var i = 0; i < this.exclDtListVal.length; i++) {
tmp +=
"<div class='no-gutters align-center' style='display:inline-block; padding:5px;'>" +
"<span id='exclDt" +
i +
"' class='pr-2' style='font-size:14px'>" +
this.exclDtListVal[i] +
'</span>' +
"<i aria-hidden='true' class='v-icon notranslate mr-1 mdi mdi-close-circle-outline theme--dark' onclick='exclDtDel(" +
i +
")' style='cursor: pointer;'></i>" +
'</div>';
}
document.getElementById('exclDtListValDiv').innerHTML = tmp;
this.exclDtListData = this.exclDtListVal.toString();
}
break;
}
},
exclDtDel(val) {
this.exclDtListVal.splice(val, 1);
var tmp = '';
for (var i = 0; i < this.exclDtListVal.length; i++) {
tmp +=
"<div class='no-gutters align-center' style='display:inline-block; padding:5px;'>" +
"<span id='exclDt" +
i +
"' class='pr-2' style='font-size:14px'>" +
this.exclDtListVal[i] +
'</span>' +
"<i aria-hidden='true' class='v-icon notranslate mr-1 mdi mdi-close-circle-outline theme--dark' onclick='exclDtDel(" +
i +
")' style='cursor: pointer;'></i>" +
'</div>';
}
document.getElementById('exclDtListValDiv').innerHTML = tmp;
this.exclDtListData = this.exclDtListVal.toString();
},
async insertDetail() {
var params = {
comId: this.snarComId,
simulId: this.simulId,
snarId: this.snarId,
calcDt: this.calcDt.substr(0, 10).replace(/-/g, ''),
exclDt: String(this.exclDtListData).replace(/-/g, ''),
cblClacDays: this.cblClacDays,
minMaxDays: this.minMaxDays,
regUserNo: null,
regDttm: null,
procUserNo: null,
procDttm: null,
};
let statusCd = await this.postUpdateApi({
apiKey: 'saveSnarExecPop',
sendParam: {
datas: {
saveSnarExecPop: [params],
},
params: {},
},
});
console.log('statusCd', statusCd);
if (statusCd.data.retnCd == 0) {
const params2 = {
simulationId: statusCd.data.dataset.simulId,
scenarioId: this.snarId,
comId: this.snarComId,
};
const res = await this.$axios.post(
'http://192.168.10.17:3000/fems',
params2,
);
}
this.setPageData({
isFind: true,
});
},
},
};
</script>
<style scoped lang="scss">
.calcDtpicker-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#calcDtpicker-container {
width: 100%;
position: absolute;
top: 36px;
left: 0;
}
}
}
}
.exclDtpicker-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#exclDtpicker-container {
width: 100%;
position: absolute;
top: -256px;
left: 0;
}
}
}
}
.v-input__custom {
flex: 0 0 auto;
&.half {
width: calc(50% - 20px);
}
}
::v-deep {
.tui-timepicker-row {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !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>

576
components/common/modal/EccWithDisabledRowPop.vue Normal file
View File

@ -0,0 +1,576 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- <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"
:hide-details="true"
outlined
></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
>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
<v-card :height="height">
<v-card-title class="d-flex align-center justify-space-between">
<span class="custom-title-4">{{
this.eqpmYn == 1 ? '공정/설비' : '공정'
}}</span>
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col v-if="label" cols="3">
<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="label ? 6 : ''">
<!-- :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-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-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<!-- <v-btn :ripple="false">초기화</v-btn> -->
<v-btn v-if="searchParam.isMulti" :ripple="false" @click="reset()"
>초기화</v-btn
>
<v-btn
v-if="!searchParam.isMulti"
:ripple="false"
@click="search()"
>검색</v-btn
>
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div :style="{ height: 'calc(100% - 213px)' }">
<div ref="treeGridParent" class="h100 py-3">
<component
:ref="'treeGrid' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree"
:dataPath="searchParam.modalData.selectFtnPlcListTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
:tree-data="ftnPlcListTreeData"
/> -->
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate()">확인</v-btn>
<v-btn :ripple="false" @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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: true,
default: '공정/설비',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
height: {
type: Number,
default: 713,
},
eqpmYn: {
type: Number,
require: false,
default: 1,
},
},
components: {
Grid,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'selectFtnPlcListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
checkedRowDataList: [],
searchWord: '',
disabledRowKeyList: [],
// isUpdate: false
// ftnPlcListTreeData: []
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
// 모달 열기/닫기 값
if (this.searchParam.isMulti == false) {
// delete this.$store.state.pageData[this.parentPrgmId]['modalData'][this.myModalKey].treeGrid.option.rowHeaders[0] = {};
this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders = [];
} else {
this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders = [{ type: 'check' }];
}
return this.dialog;
},
selectValue() {
// 선택된 공장/설비 값
const temp = [];
const facData = this.searchParam.isMulti
? this.searchParam.facInfoList
: this.searchParam.facInfo;
console.log('facData[selectValue] : ', facData);
if (Array.isArray(facData)) {
if (facData.length > 0) {
for (const item of facData) {
temp.push(item.eccNm);
}
}
} else {
return facData.path === undefined ? facData.eccNm : facData.path;
}
return temp.join();
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getTreeData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectFtnPlcListTree },
});
},
created() {
this.init();
if (this.searchParam.isMulti == true) {
this.setPageData({
facInfoList:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
} else {
this.setPageData({
facInfo:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
}
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const treeGridHeight = 490;
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [{ header: '위치정보', name: 'eccNm' }],
});
},
// 공정/설비 조회
async getTreeData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectFtnPlcListTree',
resKey: 'ftnPlcTreeDatas',
sendParam: {
blocId:
this.searchParam.blocMstrList.length > 0
? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
: this.searchParam.blocId, //"BL0001",
roiId: this.searchParam.energyList[this.searchParam.energyCd].cd, // "MTT00001" // 전력 코드 고정
eqpmYn: this.eqpmYn,
search: this.searchWord,
},
});
let myOptionsTree = {
treeColumnOptions: {
name: 'eccNm',
useIcon: true,
},
scrollX: false,
};
if (this.searchParam.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
myOptionsTree['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
myOptionsTree['treeColumnOptions']['useCascadingCheckbox'] = false;
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(
Utility.defaultGridOption(
this.$refs.treeGridParent.offsetHeight - 60,
),
myOptionsTree,
),
});
// this.treeData = res;
// const ROOT = res[0].plcCd;
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'ECC_ID',
value: res.map(item => ({
...item,
eccNm: item.eccNm,
})),
});
const setTreeDataKeys = Object.keys(setTreeData);
const resKeys = []; // eccIdList
const lastChildrenResKeys = [];
const lastChildrenResKeysRowKey = []; // lastChildrenResKeys eccId의 rowKey를 담는 리스트
for (var i = 0; i < res.length; i++) {
resKeys.push(res[i]['eccId']);
// resKeys.push(res[i]['eccId']);
}
for (var i = 0; i < res.length; i++) {
if (!setTreeDataKeys.includes(res[i]['eccId'])) {
lastChildrenResKeys.push(res[i]['eccId']);
}
}
// console.log('res : ', res);
// console.log('setTreeData : ', setTreeData);
// console.log('setTreeData.keys : ', setTreeDataKeys);
// console.log('lastChildrenResKeys : ', lastChildrenResKeys);
// for(var i=0; i<setTreeDataKeys.length; i++){
// for(var j=0; j<setTreeData[setTreeDataKeys[i]].length; j++ ){
// console.log('setTreeData[setTreeDataKeys[i]][j] : ', setTreeData[setTreeDataKeys[i]][j]);
// console.log('setTreeData[setTreeDataKeys[i]][j][rowKey] : ', setTreeData[setTreeDataKeys[i]][j]['rowKey']);
// console.log('setTreeData[setTreeDataKeys[i]][j][uniqueKey] : ', setTreeData[setTreeDataKeys[i]][j]['uniqueKey']);
// console.log('setTreeData[setTreeDataKeys[i]][j][sortKey] : ', setTreeData[setTreeDataKeys[i]][j]['sortKey']);
// console.log('setTreeData[setTreeDataKeys[i]][j][flag] : ', setTreeData[setTreeDataKeys[i]][j]['flag']);
// console.log('setTreeData[setTreeDataKeys[i]][j][eccId] : ', setTreeData[setTreeDataKeys[i]][j]['eccId']);
// if( !setTreeDataKeys.includes(setTreeData[setTreeDataKeys[i]][j]['eccId']) ){
// lastChildrenResKeysRowKey.push(setTreeData[setTreeDataKeys[i]][j]['rowKey']);
// }
// }
// }
// console.log('lastChildrenResKeysRowKey : ', lastChildrenResKeysRowKey);
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT || [],
});
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows();
}
for (var i = 0; i < setTreeDataKeys.length; i++) {
for (var j = 0; j < setTreeData[setTreeDataKeys[i]].length; j++) {
// console.log('setTreeData[setTreeDataKeys[i]][j] : ', setTreeData[setTreeDataKeys[i]][j]);
// console.log('setTreeData[setTreeDataKeys[i]][j][rowKey] : ', setTreeData[setTreeDataKeys[i]][j]['rowKey']);
// console.log('setTreeData[setTreeDataKeys[i]][j][flag] : ', setTreeData[setTreeDataKeys[i]][j]['flag']);
// console.log('setTreeData[setTreeDataKeys[i]][j][eccId] : ', setTreeData[setTreeDataKeys[i]][j]['eccId']);
if (
!setTreeDataKeys.includes(
setTreeData[setTreeDataKeys[i]][j]['eccId'],
)
) {
lastChildrenResKeysRowKey.push(
setTreeData[setTreeDataKeys[i]][j]['rowKey'],
);
}
}
}
// console.log('lastChildrenResKeysRowKey : ', lastChildrenResKeysRowKey);
// console.log(this.$refs['treeGrid' + this.parentPrgmId]);
this.disabledRowKeyList = lastChildrenResKeysRowKey;
for (var i = 0; i < lastChildrenResKeysRowKey.length; i++) {
this.$refs['treeGrid' + this.parentPrgmId].disabledRow(
lastChildrenResKeysRowKey[i],
);
}
});
},
setGridCheckedRows() {
this.checkedRowDataList =
this.searchParam.facInfoList.length > 0
? this.searchParam.facInfoList
: [];
if (this.checkedRowDataList.length > 0) {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
}
},
// 공정/설비 트리 row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
if (this.searchParam.isMulti) {
if (data._attributes.checked) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
} else {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
console.log('this.activeRowData[setUpdate] : ', this.activeRowData);
if (this.disabledRowKeyList.includes(this.activeRowData['rowKey'])) {
alert('하위목록이 없는 공정은 선택될 수 없습니다.');
return;
}
if (this.searchParam.isMulti) {
this.checkedRowDataList = this.$refs[
'treeGrid' + this.parentPrgmId
].getCheckedRowsEvt();
if (this.checkedRowDataList.length < 20) {
this.dialog = false;
this.setPageData({ facInfoList: this.checkedRowDataList });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.facInfoList),
);
} else {
alert('비교대상이 20개를 초과하였습니다.');
}
} else {
this.dialog = false;
this.setPageData({ facInfo: this.activeRowData });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.facInfo),
);
}
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll)
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
else this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
},
reset() {
for (
var i = 0;
i < this.$refs['treeGrid' + this.parentPrgmId].getData().length;
i++
) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
this.$refs['treeGrid' + this.parentPrgmId].getData()[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
},
search() {
this.getTreeData();
},
typeEnterKey() {
this.getTreeData();
},
},
};
const selectFtnPlcListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
content: none !important;
}
.tui-grid-tree-icon {
margin-left: -21px !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>

594
components/common/modal/EgrpPysclQtyPop.vue Normal file
View File

@ -0,0 +1,594 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<v-text-field
:readonly="item.readonly || false"
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-col>
<v-dialog v-model="dialog" scrollable width="540px">
<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-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="12">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols="2"
:textCols="6"
:disabled="option.eqpmGrpDisableFlag"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비그룹'"
@update:propsValue="selectValue01 = $event"
:readonly="
item.selectBoxReadonly != undefined
? item.selectBoxReadonly
: false
"
/>
</v-col>
</v-row>
<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>
<div :style="'height: 429px;'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 w100">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.pyscModalData.egrpPysclQtyPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
<v-btn
v-if="item.closeBtnFg || false"
:ripple="false"
@click="deleteBtnAction($event)"
>삭제</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '물리량',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '물리량선택',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
},
eqpmGrpDisableFlag:{
type: Boolean,
require: false,
default: false
}
// bindingFlag:{
// type:Boolean,
// require: false,
// default: false
// }
},
components: {
Grid,
Utility,
SelectBox,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'egrpPysclQtyPop',
modalDataKey: 'pyscModalData',
searchWord: '',
selectedData: {},
textFieldData: '',
selectValue01: null,
selectValueList01: [],
pyscPopVal: '',
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
eqpmGrpDisableFlag:
this.item !== undefined
? this.item.eqpmGrpDisableFlag !== undefined
? this.item.eqpmGrpDisableFlag
: this.eqpmGrpDisableFlag
: this.eqpmGrpDisableFlag
},
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
pyscPopValChg(state) {
if (this.item.popupSeq != undefined) {
return state.pageData[this.parentPrgmId]['pyscPopValChg'];
}
},
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
var dt = {
dialog: this.dialog,
selectedData: this.selectedData,
};
this.$emit('dialogOpenCloseEvent', dt);
},
async selectValue01(value) {
await this.search();
},
pyscPopValChg(value) {
this.pyscPopVal = value;
},
},
beforeCreate() {
this.$store.commit('setPageData', {
pyscModalData: { egrpPysclQtyPop },
});
},
async created() {
await this.setSelectValueList01();
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
async setSelectValueList01() {
// form으로 popup 사용할 때 인자로 eqpmKindId, eqpmGrpId 보내줘야한다.
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: {
eqpmKindId:
this.item.eqpmKindId != undefined
? this.item.eqpmKindId
: this.searchParam.eqpmKindId,
},
// form을 통해 popup을 사용할 경우 -> this.item.eqpmKindId 사용
// 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
});
if (res.length > 0) {
this.selectValueList01 = await res.map(obj => {
return {
text: obj.eqpmGrpNm,
value: obj.eqpmGrpId,
};
});
// form을 통해 popup을 사용할 경우 -> this.item.eqpmGrpId 사용
// 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
// console.log('this.item.eqpmGrpId : ', this.item.eqpmGrpId);
// console.log('this.searchParam.eqpmGrpId : ', this.searchParam.eqpmGrpId);
this.selectValue01 =
this.item.eqpmGrpId != undefined
? this.item.eqpmGrpId
: this.searchParam.eqpmGrpId != undefined
? this.searchParam.eqpmGrpId
: this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: '설비종류', name: 'eqpmKindId', hidden: true },
{ header: '설비그룹ID', name: 'eqpmGrpId', hidden: true },
{ header: '물리량ID', name: 'pysclQtyId', width: 100 },
{
header: '물리량코드',
name: 'pysclQtyCd',
align: 'left',
},
{ header: '물리량명', name: 'pysclQtyNm', width: 100 },
{ header: 'pysclQtyTp', name: 'pysclQtyTp', hidden: true },
{ header: '물리량타입', name: 'pysclQtyTpNm', width: 80 },
// { header: 'rowStat', name : 'rowStat'},
],
});
},
async getGridData() {
this.loadGrid = false;
let res = [];
res = await this.postApiReturn({
apiKey: 'selectEgrpPysclQtyPop',
resKey: 'egrpPysclQtyData',
sendParam: {
searchWord: this.searchWord,
eqpmGrpId: this.selectValue01,
openMode: this.item.openMode,
},
});
let newRes = [];
let tempTagList = this.pyscPopVal.split('/*wq2a/');
let tagList = tempTagList.filter(item => item != '');
if (tagList.length > 0) {
newRes = res.filter(item => {
return !tagList.includes(item.pysclQtyId);
});
res = newRes;
}
//이미 선택된 값들 제거(배열)
if (this.item.dataList) {
if (this.item.dataList.length > 0) {
newRes = res.filter(item => {
return !this.item.dataList.includes(item.pysclQtyId);
});
res = newRes;
}
}
// res = [
// {
// 'pysclQtyId' : 'PYSCL00001',
// 'pysclQtyCd' : 'AMP_1A',
// 'pysclQtyNm' : '회로1 전류A',
// 'pysclQtyTpNm' : 'TAG'
// }
// ]
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
let flag = false;
let bindingObj = {};
if (this.item.bindingItemList != undefined) {
bindingObj = this.item.bindingItemList;
}
if (
bindingObj.constructor === Object &&
Object.keys(bindingObj).length === 0
) {
this.textFieldData = this.selectedData.calcProc;
} else {
for (const [parentPageBindingKey, popupBindingKey] of Object.entries(
bindingObj,
)) {
// 여러 물리량 popup을 사용시 같은 물리량 ID 선택을 방지////
if (this.item.popupSeq != undefined) {
flag = this.checkPyscPopVal(this.selectedData[popupBindingKey]);
}
if (flag) {
alert('물리량이 중복 선택되었습니다.');
break;
}
/////////////////////////////////////////////////////////
this.myBindingData[parentPageBindingKey] = this.selectedData[
popupBindingKey
];
const dt = {
columnName: parentPageBindingKey,
value: this.selectedData[popupBindingKey],
};
this.$emit('gridEditingFinish', dt);
this.setPageData({
[parentPageBindingKey]: this.selectedData[popupBindingKey],
});
}
}
this.dialog = flag;
},
async dialogOpenCloseEvent(val) {
await this.setSelectValueList01();
if (!this.myBindingData) {
return alert('그리드를 먼저 선택해주세요.');
}
this.dialog = !val;
},
deleteBtnAction(v) {
this.dialog = false;
let bindingObj = {};
if (this.item.bindingItemList != undefined) {
bindingObj = this.item.bindingItemList;
}
if (
bindingObj.constructor === Object &&
Object.keys(bindingObj).length === 0
) {
this.textFieldData = null;
} else {
for (const [parentPageBindingKey, popupBindingKey] of Object.entries(
bindingObj,
)) {
this.myBindingData[parentPageBindingKey] = null;
const dt = {
columnName: parentPageBindingKey,
value: null,
};
this.$emit('gridEditingFinish', dt);
this.setPageData({ [parentPageBindingKey]: null });
}
}
},
checkPyscPopVal(data) {
//GdIdxMngPage의 setPyscPopValChg 참고
let tempList = [];
let res = false;
tempList = this.pyscPopVal.split('/*wq2a/');
if (tempList.includes(data)) {
if (this.item.popupSeq > tempList.indexOf(data)) {
res = true;
}
}
return res;
},
},
};
var egrpPysclQtyPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

684
components/common/modal/ElecPowChrgPop.vue Normal file
View File

@ -0,0 +1,684 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- <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-col>
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="900"
overlay-color="#000"
overlay-opacity="0.8"
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"
>
<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>
</v-card-title>
<!-- <v-card-actions> -->
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col :cols="label ? 3 : ''">
<component
:is="'selectCodeList'"
:parentPrgmId="parentPrgmId"
:label="'계약구분'"
dataKey="searchElecContKind"
:sendParam="{ commGrpCd: 'EM_CONT', useFg: '1' }"
:addAll="true"
/>
</v-col>
<v-col :cols="label ? 3 : ''">
<component
:is="'selectCodeList'"
:parentPrgmId="parentPrgmId"
:label="'전압구분'"
dataKey="searchVoltKind"
:sendParam="{ commGrpCd: 'EM_VOLT_KIND', useFg: '1' }"
:addAll="true"
/>
</v-col>
<v-col :cols="label ? 3 : ''">
<component
:is="'selectCodeList'"
:parentPrgmId="parentPrgmId"
:label="'전압구분'"
dataKey="searchOptKind"
:sendParam="{ commGrpCd: 'EM_VOLT_OPT', useFg: '1' }"
:addAll="true"
/>
</v-col>
<v-col cols="3" class="text-right">
<v-btn
v-if="!searchParam.isMulti"
:ripple="false"
@click="search()"
>검색</v-btn
>
<v-btn
v-if="!searchParam.isMulti"
:ripple="false"
@click="initVal()"
>초기화</v-btn
>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<v-card-text>
<div id="gridParent" ref="gridParent" style="height: 500px">
<component
:ref="'gridName' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData2.selectElecPowChrgPopList"
:parentPrgmId="parentPrgmId"
:bindingData="bindingData"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
</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-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
},
},
components: {
Grid,
selectCodeList,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'selectElecPowChrgPopList',
gridName: 'rowElecContGrid',
loadGrid: false,
dialog: false,
modalDataKey: 'modalData2',
activeRowData: {},
checkedRowDataList: [],
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
rowGridSelectData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId].rowGridSelectData;
} else {
return state.pageData[this.parentPrgmId][this.bindingData]
.rowGridSelectData;
}
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
chkElecContKind() {
return this.searchParam.searchElecContKind;
},
chkVoltKind() {
return this.searchParam.searchVoltKind;
},
chkOptKind() {
return this.searchParam.searchOptKind;
},
selectValue: {
get() {
// if(this.searchParam.rowGridSelectData){
// return this.searchParam.rowGridSelectData[this.item.valueNm];
// }
return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
},
set(value) {
// return value;
// return this.myBindingData({ [this.item.valueNm]: value });
//return this.setPageData({ [this.item.valueNm]: value });
return this.myBindingData({ [this.item.valueNm]: value });
},
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getData();
} else {
this.searchParam.searchElecContKind = '';
this.searchParam.searchVoltKind = '';
this.searchParam.searchOptKind = '';
}
},
chkElecContKind() {
if (this.dialog) {
this.getData();
}
},
chkVoltKind() {
if (this.dialog) {
this.getData();
}
},
chkOptKind() {
if (this.dialog) {
this.getData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { selectElecPowChrgPopList },
});
},
created() {
this.init();
// if(this.searchParam.isMulti == true){
// this.setPageData({
// facInfoList : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }else{
// this.setPageData({
// facInfo : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const myOptions = {};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(Utility.defaultGridOption(490), myOptions),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
},
// 계약 정보 조회
async getData() {
this.loadGrid = false;
let res = [];
res = await this.postApiReturn({
apiKey: 'selectElecPowChrgInfo',
resKey: 'elecPowChrgInfoData',
sendParam: {
elecContKind: this.searchParam.searchElecContKind,
voltKind: this.searchParam.searchVoltKind,
optKind: this.searchParam.searchOptKind,
},
});
// function setRowSpanAttribute(
// res,
// targetAttributeName,
// targetAttributeList,
// ) {
// if (!(res.length && res.length >= 1)) {
// return;
// }
// if (targetAttributeList == undefined) {
// var currentCnt = 1;
// var currentIdx = 0;
// var currentValue = res[0][targetAttributeName];
// for (var i = 1; i < res.length; i++) {
// if (res[i][targetAttributeName] != currentValue) {
// if (res[currentIdx]['_attributes'] == undefined) {
// res[currentIdx]['_attributes'] = { rowSpan: new Object() };
// //추가용
// res[currentIdx]['_attributes']['className'] = {column:new Object()};
// //추가용
// }
// res[currentIdx]['_attributes']['rowSpan'][
// targetAttributeName
// ] = currentCnt;
// //추가용
// res[currentIdx]['_attributes']['className']['column'][targetAttributeName] = ['rowSpan-done'];
// //추가용
// currentValue = res[i][targetAttributeName];
// currentCnt = 1;
// currentIdx = i;
// } else if (
// res[i][targetAttributeName] == currentValue &&
// i == res.length - 1
// ) {
// currentCnt = currentCnt + 1;
// if (res[currentIdx]['_attributes'] == undefined) {
// res[currentIdx]['_attributes'] = { rowSpan: new Object() };
// //추가용
// res[currentIdx]['_attributes']['className'] = {column:new Object()};
// //추가용
// }
// res[currentIdx]['_attributes']['rowSpan'][
// targetAttributeName
// ] = currentCnt;
// //추가용
// res[currentIdx]['_attributes']['className']['column'][targetAttributeName] = ['rowSpan-done'];
// //추가용
// } else {
// currentCnt = currentCnt + 1;
// }
// }
// } else {
// var currentCnt = 1;
// var currentIdx = 0;
// for (var i = 1; i < res.length; i++) {
// if (!compareValue(res, targetAttributeList, currentIdx, i)) {
// if (res[currentIdx]['_attributes'] == undefined) {
// res[currentIdx]['_attributes'] = { rowSpan: new Object() };
// //추가용
// res[currentIdx]['_attributes']['className'] = {column:new Object()};
// //추가용
// }
// if (currentCnt != 1) {
// res[currentIdx]['_attributes']['rowSpan'][
// targetAttributeName
// ] = currentCnt;
// //추가용
// res[currentIdx]['_attributes']['className']['column'][targetAttributeName] = ['rowSpan-done'];
// //추가용
// }
// currentCnt = 1;
// currentIdx = i;
// } else if (
// compareValue(res, targetAttributeList, currentIdx, i) &&
// i == res.length - 1
// ) {
// currentCnt = currentCnt + 1;
// if (res[currentIdx]['_attributes'] == undefined) {
// res[currentIdx]['_attributes'] = { rowSpan: new Object() };
// //추가용
// res[currentIdx]['_attributes']['className'] = {column:new Object()};
// //추가용
// }
// if (currentCnt != 1) {
// res[currentIdx]['_attributes']['rowSpan'][
// targetAttributeName
// ] = currentCnt;
// //추가용
// res[currentIdx]['_attributes']['className']['column'][targetAttributeName] = ['rowSpan-done'];
// //추가용
// }
// } else {
// currentCnt = currentCnt + 1;
// }
// }
// }
// function compareValue(res, targetAttributeList, currentIdx, targetIdx) {
// for (var i = 0; i < targetAttributeList.length; i++) {
// if (
// res[currentIdx][targetAttributeList[i]] !=
// res[targetIdx][targetAttributeList[i]]
// ) {
// return false;
// }
// }
// return true;
// }
// }
// setRowSpanAttribute(res, 'elecContKindNm');
// setRowSpanAttribute(res, 'voltKindNm');
// setRowSpanAttribute(res, 'optKindNm');
// setRowSpanAttribute(res, 'baseChrg');
function setRowSpanAttribute(
separateColStandardList,
res,
targetAttributeName,
rowSpanList
) {
if (!(res.length && res.length >= 2)) {
return;
}
var valueList = [];
var rowSpanValueList = [];
var currentIdx = 0;
for (var i = 0; i < res.length; i++) {
valueList.push(res[i][targetAttributeName]);
}
function makeCurrentSeparateVal(idx, separateColStandardList) {
let returnVal = '';
for (var i = 0; i < separateColStandardList.length; i++) {
returnVal += res[idx][separateColStandardList[i]];
}
return returnVal;
}
let beforeSeparateVal = makeCurrentSeparateVal(
0,
separateColStandardList,
);
rowSpanValueList[0] = [valueList[0], 1, currentIdx];
for (var i = 1; i < valueList.length; i++) {
currentIdx += 1;
let currentSeparateVal = makeCurrentSeparateVal(
i,
separateColStandardList,
);
if (
currentSeparateVal == beforeSeparateVal &&
valueList[i] == rowSpanValueList[rowSpanValueList.length - 1][0]
) {
rowSpanValueList[rowSpanValueList.length - 1][1] += 1;
} else {
rowSpanValueList[rowSpanValueList.length] = [
valueList[i],
1,
currentIdx,
];
beforeSeparateVal = currentSeparateVal;
}
}
for (var i = 0; i < rowSpanValueList.length; i++) {
if (rowSpanValueList[i][1] === 1) {
continue;
}
if (res[rowSpanValueList[i][2]]['_attributes'] == undefined) {
res[rowSpanValueList[i][2]]['_attributes'] = {
rowSpan: new Object(),
};
//추가용
res[rowSpanValueList[i][2]]['_attributes']['className'] = {column:new Object()};
for(var j=0; j<rowSpanList.length; j++){
res[rowSpanValueList[i][2]]['_attributes']['className']['column'][rowSpanList[j]] = ['colrowspan'];
}
//추가용
}
res[rowSpanValueList[i][2]]['_attributes']['rowSpan'][
targetAttributeName
] = rowSpanValueList[i][1];
res[rowSpanValueList[i][2]]['_attributes']['className']['column'][targetAttributeName].push(['rowrowspan']);
}
}
// rowSpanList 합쳐지는 row colNm을 넣어야 함
let rowSpanList = ['elecContKindNm', 'voltKindNm', 'optKindNm', 'baseChrg'];
setRowSpanAttribute(['elecContKindNm'], res, 'elecContKindNm', rowSpanList);
setRowSpanAttribute(['elecContKindNm'], res, 'voltKindNm', rowSpanList);
setRowSpanAttribute(['elecContKindNm'], res, 'optKindNm', rowSpanList);
setRowSpanAttribute(['elecContKindNm'], res, 'baseChrg', rowSpanList);
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
async getRowData(data) {
this.activeRowData = data;
},
setUpdate() {
if (this.searchParam.isMulti) {
// 멀티 처리 필요사 시용...
// this.checkedRowDataList = this
} else {
this.dialog = false;
var nm = this.item.valueNm;
if (nm == 'elecContId') {
this.myBindingData.elecContId = this.activeRowData.eleclContId;
this.myBindingData.elecContNm = this.activeRowData.eleclContNm;
const dt1 = {
columnName: 'elecContId',
value: this.activeRowData.eleclContId,
};
const dt2 = {
columnName: 'elecContNm',
value: this.activeRowData.eleclContNm,
};
this.$emit('gridEditingFinish', dt1);
this.$emit('gridEditingFinish', dt2);
}
}
},
initVal() {
this.dialog = false;
var nm = this.item.valueNm;
if (nm == 'elecContId') {
this.myBindingData.elecContId = '';
this.myBindingData.elecContNm = '';
const dt1 = {
columnName: 'elecContId',
value: '',
};
const dt2 = {
columnName: 'elecContNm',
value: '',
};
this.$emit('gridEditingFinish', dt1);
this.$emit('gridEditingFinish', dt2);
}
},
search() {
this.getData();
},
},
};
document.querySelector("#gridParent > div > div > div.tui-grid-content-area > div.tui-grid-rside-area > div.tui-grid-body-area > div > div.tui-grid-table-container > table > tbody > tr.tui-grid-row-odd.tui-grid-cell-current-row")
const selectElecPowChrgPopList = {
rowElecContGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
const myColumns = [
{ header: '전력계약 ID', name: 'eleclContId', hidden: true},
{ header: '전력계약 명', name: 'eleclContNm', hidden: true},
{ header: '전력계약구분CD', name: 'elecContKind', hidden: true},
{ header: '전력계약구분', name: 'elecContKindNm', align: 'center'},
{ header: '전압구분CD', name: 'voltKind', hidden: true },
{ header: '전압구분', name: 'voltKindNm', align: 'center' },
{ header: '옵션CD', name: 'optKind', hidden: true },
{ header: '옵션', name: 'optKindNm', align: 'center' },
{
header: '기본요금(원/kW)',
name: 'baseChrg',
align: 'right',
formatter({ value }) {
return Utility.setFormatInt(value);
},
},
{ header: '시간대CD', name: 'peakKind', hidden: true },
{ header: '시간대', name: 'peakKindNm', align: 'center' },
{
header: '여름철(6~8월)',
name: 'unitPrcSum',
align: 'right',
formatter({ value }) {
return Utility.setFormatIntDecimal(value, 1);
},
},
{
header: '봄·가을철(3~5,9~10월)',
name: 'unitPrcSprfal',
align: 'right',
formatter({ value }) {
return Utility.setFormatIntDecimal(value, 1);
},
},
{
header: '겨울철(11~2월)',
name: 'unitPrcWin',
align: 'right',
formatter({ value }) {
return Utility.setFormatIntDecimal(value, 1);
},
},
];
// 전력량 요금(원/kWh)
</script>
<style lang="scss">
// @import '@/assets/scss/common.scss';
@import '@/assets/scss/var.scss';
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.tui-grid {
&-row-odd,
&-row-even {
&:hover > .colrowspan{
background-color: map-deep-get(
$config,
#{$theme},
"tui-grid-cell-backgroundColor"
)!important;
.tui-grid-cell-content {
color: map-deep-get($config, #{$theme}, "activate")!important;
}
}
}
&-cell{
&.row-selected.colrowspan{
background-color: map-deep-get(
$config,
#{$theme},
"tui-grid-cell-backgroundColor"
)!important;
.tui-grid-cell-content {
color: map-deep-get($config, #{$theme}, "activate")!important;
}
}
}
}
}
}
</style>

723
components/common/modal/ElecSafeChkDetailPop.vue Normal file
View File

@ -0,0 +1,723 @@
<template>
<div>
<v-dialog
v-model="dialog"
width="900"
overlay-color="#000"
overlay-opacity="0.8"
>
<v-card>
<v-toolbar
:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
class="py-4 pr-3 pl-5"
height="auto"
>
<v-toolbar-title>{{ label }}</v-toolbar-title>
<!-- <v-btn
icon
tile
small
:ripple="false"
@click="btnAction('close')"
:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
>
<v-icon>mdi-close</v-icon>
</v-btn> -->
</v-toolbar>
<template>
<div style="padding : 20px">
<v-col :cols="12">
<v-row>
<v-col :cols="6">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="4">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
점검자
</label>
</v-col>
<v-col :cols="8">
<v-text-field
v-model="chkMan"
class="v-input__custom"
:disabled="componentDisableFlag"
outlined
:hide-details="true"
></v-text-field>
</v-col>
</v-row>
</v-col>
<v-col :cols="6">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="4">
<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="8">
<div class="startpicker-container2">
<v-text-field
id="startpicker2"
ref="startpicker2"
v-model="targetDateTimeValue"
:class="'v-input__custom'"
:hide-details="true"
readonly
outlined
:disabled="componentDisableFlag"
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div
ref="startpicker-container2"
id="startpicker-container2"
></div>
</template>
</v-text-field>
</div>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row>
<v-col :cols="6">
<EqpmPop
:parentPrgmId="parentPrgmId"
:bindOption="myBindOption"
ref="eqpmPopInDetailPop"
:disabled="componentDisableFlag"
:textCols="8"
/>
</v-col>
<v-col :cols="6">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="4">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
설비용량
</label>
</v-col>
<v-col :cols="8">
<v-text-field
v-model="eqpmCapa"
class="v-input__custom"
:disabled="componentDisableFlag"
outlined
:hide-details="true"
type="number"
></v-text-field>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row>
<v-col :cols="6">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="4">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
점검결과
</label>
</v-col>
<v-col :cols="8">
<!-- <v-text-field
v-model="chkRslt"
class="v-input__custom"
:disabled="componentDisableFlag"
outlined
:hide-details="true"
></v-text-field> -->
<v-select
v-model="chkRslt"
:items="chkRsltList"
:item-text="chkRsltList.text"
:item-value="chkRsltList.value"
outlined
:hide-details="true"
append-icon="mdi-chevron-down"
class="v-select__custom"
:disabled="componentDisableFlag"
></v-select>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="2">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
점검 실시 내용
</label>
</v-col>
<v-col :cols="10">
<v-textarea
v-model="chkExctCntn"
class="v-input__custom"
:disabled="componentDisableFlag"
outlined
:hide-details="true"
:maxlength="1000"
></v-textarea>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="2">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
안전관리 의견
</label>
</v-col>
<v-col :cols="10">
<v-textarea
v-model="elecEqpmSafeMngOpn"
class="v-input__custom"
:disabled="componentDisableFlag"
outlined
:hide-details="true"
:maxlength="1000"
></v-textarea>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row>
<v-col v-show="!componentDisableFlag" :cols="12">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="2">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
파일 첨부
</label>
</v-col>
<v-col :cols="10">
<v-file-input
multiple
background-color="#47535c"
show-size
v-model="fileData"
hide-details="true"
>
</v-file-input>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row
v-show="popUpAction === 'read' || popUpAction === 'update'"
>
<v-col :cols="12">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="2">
<label class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
파일 목록
</label>
</v-col>
<v-col :cols="10">
<v-row
v-for="fileData in fileList"
:key="fileData.apndFileId"
>
<a @click.prevent="downloadFile(fileData)">
<v-col :cols="12">
<div class="search-box-label">
{{
fileData.apndFileNm + '.' + fileData.apndFileExt
}}
</div>
</v-col>
</a>
<v-icon
v-show="popUpAction === 'update'"
class="pl-5"
@click="addFileToDeleteFileList(fileData)"
>
mdi-close
</v-icon>
</v-row>
</v-col>
</v-row>
</v-col>
</v-row>
</v-col>
</div>
</template>
<v-card-actions class="justify-end">
<v-btn
v-show="!componentDisableFlag"
:ripple="false"
@click="btnAction('save')"
>저장</v-btn
>
<v-btn :ripple="false" @click="btnAction('close')">닫기</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import InputText from '~/components/common/form/InputText';
import InputNumber from '~/components/common/form/InputNumber';
import TextArea from '~/components/common/form/TextArea';
import SelectBox from '~/components/common/form/SelectBox';
import SelectBoxes from '~/components/common/form/SelectBoxes';
import CheckBox from '~/components/common/form/CheckBox';
import Label from '~/components/common/form/Label';
import EqpmPop from '~/components/common/modal/EqpmPop';
import TuiDatepicker from 'tui-date-picker';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
default: '',
},
},
components: {
InputText,
InputNumber,
TextArea,
SelectBox,
SelectBoxes,
CheckBox,
Label,
EqpmPop,
TuiDatepicker,
Utility,
},
data() {
return {
dialog: false,
popUpAction: 'read', // 'read', 'insert', 'update'
myBindOption: {
eqpmId: 'modalmodalEqpmId',
eqpmNm: 'modalmodalEqpmNm',
parentModalState: 'close',
},
chkMan: '',
chkDd: '',
eqpmNm: '',
eqpmId: '',
eqpmCapa: '',
chkRslt: '',
chkExctCntn: '',
elecEqpmSafeMngOpn: '',
fileData: null,
fileList: null,
targetDateTimeValue: new Date().toISOString().substr(0, 10),
startDatepickerInstance: null,
deleteFileList: [],
chkRsltList: [
{ text: '적합', value: 'Y' },
{ text: '부적합', value: 'N' },
],
};
},
computed: {
...mapState({
searchParam(state) {
//console.log("#################")
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
componentDisableFlag() {
if (this.popUpAction === 'read') {
return true;
} else {
return false;
}
},
},
watch: {
async chkDialog(val) {
if (val) {
this.openDialog();
this.$nextTick(() => {
if (this.popUpAction === 'insert') {
this.$refs['eqpmPopInDetailPop'].parentModalState = 'openWithInit';
} else {
this.$refs['eqpmPopInDetailPop'].parentModalState = 'open';
}
});
} else {
this.$nextTick(() => {
this.$refs['eqpmPopInDetailPop'].parentModalState = 'close';
});
}
},
},
mounted() {
// this.tuiCalendarInit();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
}),
...mapActions({
postApi: 'modules/list/postApi',
postUpdateApi: 'modules/list/postUpdateApi',
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
chkOpenTabList: 'chkOpenTabList',
getDomain: 'modules/list/getDomain',
}),
tuiCalendarInit() {
const startContainer = document.getElementById('startpicker-container2');
const startTarget = document.getElementById('startpicker2');
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
date: new Date(),
language: 'ko',
type: 'date',
input: {
element: startTarget,
format: 'YYYY-MM-DD',
},
timePicker: false,
});
this.startDatepickerInstance.on('change', () => this.getStartDt());
},
getStartDt() {
const dt = this.startDatepickerInstance.getDate();
this.targetDateTimeValue = String(dt.toISOString()).substr(0, 10);
},
convertStringToDateFormat(val) {
var result = '';
result = Utility.setFormatDate(val, 'YYYY-MM-DD');
return result;
},
convertDateFormatToString(val) {
return val.replaceAll('-', '');
},
async getFileList(apndFileUuid) {
var fileList = [];
if (apndFileUuid === null || apndFileUuid === '') {
return fileList;
}
fileList = await this.postUpdateApi({
apiKey: 'selectApndFile',
sendParam: {
params: {
apndFileUuid: apndFileUuid,
},
datas: {},
},
});
return fileList.data.dataset.apndFile;
},
async openDialog() {
this.targetDateTimeValue = '';
this.fileList = null;
this.fileData = null;
this.deleteFileList = [];
//datepicker setting
this.$nextTick(() => {
this.tuiCalendarInit();
switch (this.popUpAction) {
case 'read':
this.targetDateTimeValue = this.convertStringToDateFormat(
this.searchParam.rowGridSelectData.chkDd,
);
break;
case 'insert':
this.targetDateTimeValue = this.convertStringToDateFormat(
new Date(),
);
break;
case 'update':
this.targetDateTimeValue = this.convertStringToDateFormat(
this.searchParam.rowGridSelectData.chkDd,
);
break;
}
});
switch (this.popUpAction) {
case 'read':
this.chkMan = this.searchParam.rowGridSelectData.chkMan;
this.eqpmNm = this.searchParam.rowGridSelectData.eqpmNm;
this.eqpmId = this.searchParam.rowGridSelectData.eqpmId;
this.eqpmCapa = this.searchParam.rowGridSelectData.eqpmCapa;
this.chkRslt = this.searchParam.rowGridSelectData.chkRslt;
this.chkExctCntn = this.searchParam.rowGridSelectData.chkExctCntn;
this.elecEqpmSafeMngOpn = this.searchParam.rowGridSelectData.elecEqpmSafeMngOpn;
this.fileList = await this.getFileList(
this.searchParam.rowGridSelectData.apndFileUuid,
);
break;
case 'insert':
this.chkMan = '';
this.eqpmNm = '';
this.eqpmId = '';
this.eqpmCapa = '';
this.chkRslt = '';
this.chkExctCntn = '';
this.elecEqpmSafeMngOpn = '';
this.fileData = null;
break;
case 'update':
this.chkMan = this.searchParam.rowGridSelectData.chkMan;
this.eqpmNm = this.searchParam.rowGridSelectData.eqpmNm;
this.eqpmId = this.searchParam.rowGridSelectData.eqpmId;
this.eqpmCapa = this.searchParam.rowGridSelectData.eqpmCapa;
this.chkRslt = this.searchParam.rowGridSelectData.chkRslt;
this.chkExctCntn = this.searchParam.rowGridSelectData.chkExctCntn;
this.elecEqpmSafeMngOpn = this.searchParam.rowGridSelectData.elecEqpmSafeMngOpn;
this.fileList = await this.getFileList(
this.searchParam.rowGridSelectData.apndFileUuid,
);
break;
}
},
async btnAction(action) {
switch (action) {
case 'close':
this.dialog = !this.dialog;
break;
case 'save':
this.dialog = !this.dialog;
if (this.popUpAction === 'insert') {
await this.insertDetail();
} else if (this.popUpAction === 'update') {
await this.updateDetail();
}
break;
}
},
async insertDetail() {
var fileList = this.fileData;
var apndFileUuid = null;
var formData = new FormData();
if (fileList !== null) {
for (var i = 0; i < fileList.length; i++) {
formData.append('file', fileList[i]);
}
formData.append('elecSafeChkNo', '');
apndFileUuid = await this.postUpdateApi({
apiKey: 'saveFileElecSafeChk',
resKey: 'apndFileUuid',
sendParam: formData,
});
}
apndFileUuid =
apndFileUuid === null ? '' : apndFileUuid.data.dataset.apndFileUuid;
var params = {
chkMan: this.chkMan,
chkDd: this.convertDateFormatToString(this.targetDateTimeValue),
eqpmId: this.searchParam[this.myBindOption.eqpmId],
eqpmCapa: this.eqpmCapa,
chkRslt: this.chkRslt,
chkExctCntn: this.chkExctCntn,
elecEqpmSafeMngOpn: this.elecEqpmSafeMngOpn,
apndFileUuid: apndFileUuid,
rowStat: 'I',
};
await this.postUpdateApi({
apiKey: 'saveElecSafeChk',
sendParam: {
datas: {
dsElecSafeChkData: [params],
},
params: {},
},
});
this.setPageData({
isFind: true,
});
},
async updateDetail() {
var fileList = this.fileData;
var apndFileUuid = null;
var formData = new FormData();
if (fileList !== null) {
for (var i = 0; i < fileList.length; i++) {
formData.append('file', fileList[i]);
}
formData.append(
'elecSafeChkNo',
this.searchParam.rowGridSelectData.elecSafeChkNo,
);
apndFileUuid = await this.postUpdateApi({
apiKey: 'saveFileElecSafeChk',
resKey: 'apndFileUuid',
sendParam: formData,
});
}
var deleteFileParam = {
apndFile: this.deleteFileList,
};
if (this.deleteFileList.length > 0) {
await this.postApiReturn({
apiKey: 'deleteApndFile',
sendParam: deleteFileParam,
});
}
apndFileUuid =
apndFileUuid === null ? '' : apndFileUuid.data.dataset.apndFileUuid;
var params = {
elecSafeChkNo: this.searchParam.rowGridSelectData.elecSafeChkNo,
chkMan: this.chkMan,
chkDd: this.convertDateFormatToString(this.targetDateTimeValue),
eqpmId: this.searchParam[this.myBindOption.eqpmId],
eqpmCapa: this.eqpmCapa,
chkRslt: this.chkRslt,
chkExctCntn: this.chkExctCntn,
elecEqpmSafeMngOpn: this.elecEqpmSafeMngOpn,
apndFileUuid: apndFileUuid,
rowStat: 'U',
};
await this.postUpdateApi({
apiKey: 'saveElecSafeChk',
sendParam: {
datas: {
dsElecSafeChkData: [params],
},
params: {},
},
});
this.setPageData({
isFind: true,
});
},
async downloadFile(item) {
var menuId = 'MNU0002';
var urlPrefix = await this.getDomain();
var downLoadUrl =
urlPrefix +
'comm/base/ApndFileCtr/selectDownloadApndFile?$menuId=' +
menuId +
'&apndFileId=' +
item.apndFileId;
await this.$axios
.get(downLoadUrl, { responseType: 'blob' })
.then(response => {
const blob = new Blob([response.data]);
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = item.apndFileNm + '.' + item.apndFileExt;
link.click();
URL.revokeObjectURL(link.href);
})
.catch(console.error);
},
addFileToDeleteFileList(item) {
this.deleteFileList.push({ apndFileId: item.apndFileId });
var index = null;
if (typeof this.fileList === 'object' && this.fileList.length - 1 >= 0) {
for (var i = 0; i < this.fileList.length; i++) {
if (item.apndFileId === this.fileList[i].apndFileId) {
index = i;
break;
}
}
this.fileList.splice(index, 1);
}
},
},
};
</script>
<style scoped lang="scss">
.startpicker-container2 {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#startpicker-container2,
#endpicker-container2 {
width: 100%;
position: absolute;
top: 36px;
left: 0;
}
}
}
}
.v-input__custom {
flex: 0 0 auto;
&.half {
width: calc(50% - 20px);
}
}
::v-deep {
.tui-timepicker-row {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}
}
}
</style>

246
components/common/modal/EnrgCostCenterPop.vue Normal file
View File

@ -0,0 +1,246 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
<label for="" class="search-box-label">
{{ item.label }}
<span v-if="item.essential">*</span>
</label>
</v-col>
<v-col :cols="item.cols == 12 ? 9 : item.label ? 7 : ''">
<v-row>
<v-col cols="5" class="mr-2">
<v-text-field
readonly
v-model="selectValue1"
class="v-input__custom"
disabled
></v-text-field>
</v-col>
<v-col cols="5" class="mr-2">
<v-text-field
readonly
v-model="selectValue2"
class="v-input__custom"
disabled
></v-text-field>
</v-col>
<v-col cols="1">
<v-btn icon class="v-btn-bg__blue" @click="dialog = !dialog">
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-col>
</v-row>
</v-col>
<v-dialog v-model="dialog" width="640px">
<v-card>
<v-card-title class="d-flex justify-space-between">
<span>검침개소위치</span>
<v-btn icon @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
</v-card-title>
<v-card-actions class="flex-column">
<v-row class="w100">
<v-col cols="2">
<label for="" class="search-box-label">
검색
</label>
</v-col>
<v-col cols="7">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
></v-text-field>
</v-col>
</v-row>
<div id="gridParent" class="w100 popup-container my-3">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData.selectReadPlcPopList"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
<div class="w100 text-right">
<v-btn class="v-btn__round v-btn-bg__blue" @click="setUpdate()"
>확인</v-btn
>
</div>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
item: {
type: Object,
require: true,
},
},
components: {
Grid,
},
data() {
return {
myModalKey: 'selectReadPlcPopList',
gridName: 'rowGrid',
loadGrid: false,
changeData: {},
dialog: false,
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData() {
return this.searchParam['rowGridSelectData'];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue1() {
// 선택된 값
return this.myBindingData && this.myBindingData[this.item.valueNm.code]
? this.myBindingData[this.item.valueNm.code]
: null;
},
selectValue2() {
// 선택된 값
return this.myBindingData && this.myBindingData[this.item.valueNm.name]
? this.myBindingData[this.item.valueNm.name]
: null;
},
},
watch: {
async chkDialog(val) {
if (val) {
// 열릴 때
const _this = this;
setTimeout(() => {
_this.init();
}, 300);
setTimeout(() => {
_this.getData();
}, 400);
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectReadPlcPopList },
});
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.gridInit();
},
gridInit() {
//console.log(document.getElementById("gridParent").offsetHeight);
const gridHeight =
document.getElementById('gridParent').offsetHeight - 30;
const myOptions = {};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
value: myColumns,
});
},
async getData() {
const res = await this.postApiReturn({
apiKey: 'selectFtnPlcInfoList',
resKey: 'ftnPlcInfoData',
sendParam: {
params: {
comId: this.myBindingData.comId,
blocId: this.myBindingData.blocId,
},
isMulti: false,
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
value: res,
});
this.loadGrid = true;
},
// sms 목록 그리드 클릭 이벤트
async getRowData(data) {
this.changeData = data;
//console.log(data);
},
setUpdate() {
this.dialog = false;
// return false;
this.$emit('gridEditingFinish', {
columnName: this.item.valueNm.code,
value: this.changeData[this.item.valueNm.targetCode],
});
this.$emit('gridEditingFinish', {
columnName: this.item.valueNm.name,
value: this.changeData[this.item.valueNm.targetName],
});
},
},
};
const selectReadPlcPopList = {
rowGrid: {
data: [],
column: [],
option: {},
},
// isMulti: false
};
const myColumns = [
{ header: '설비코드', name: 'plcCd', align: 'center' },
{ header: '설비명', name: 'plcNm' },
{ header: '설비명', name: 'plcCdNm', hidden: true },
];
</script>
<style scoped>
/* .v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
} */
</style>

452
components/common/modal/EnrgEffcEqpmDetailPop.vue Normal file
View File

@ -0,0 +1,452 @@
<template>
<v-row class="search-box" align="center" no-gutters >
<!-- <v-col v-if="label" cols="2"> -->
<!-- <v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
</label>
</v-col> -->
<!-- <v-col :cols="label ? textCols : ''">
<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-col> -->
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="1400"
overlay-color="#000"
overlay-opacity="0.8"
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"
>
<span class="custom-title-4">{{ '' }}</span>
<v-btn icon tile :ripple="false" @click="closePop()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title> -->
<!-- <v-card-actions> -->
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col :cols="4">
<div class="d-flex align-center justify-space-between pb-5">
<v-card-title class="pa-0">가이드 알람이력</v-card-title>
</div>
</v-col>
<v-col :cols="8" class="text-right">
<v-btn icon tile :ripple="false" @click="closePop()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="1">
<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="2">
<v-text-field
v-if="dialog"
v-model="InputValue['eqpmId']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
</v-col>
<v-col :cols="3">
<v-text-field
v-if="dialog"
v-model="InputValue['eqpmNm']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
</v-col>
<v-col :cols="6">
</v-col>
<v-col :cols="1">
<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="2">
<v-text-field
v-if="dialog"
v-model="InputValue['gdIdxId']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
</v-col>
<v-col :cols="3">
<v-text-field
v-if="dialog"
v-model="InputValue['gdIdxNm']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4">◇ 설비 가이드 정보</v-card-title>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div ref="modalGridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid? 'Grid' : null"
:dataPath="searchParam.modalData.eqpmDetlPop"
:gridName="gridName"
:parentPrgmId="parentPrgmId"
/>
</div>
</div>
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
<component
:ref="'gridName' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData2.modifyEnrgUsePlanData"
:parentPrgmId="parentPrgmId"
:bindingData="bindingData"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div> -->
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="closePop()">확인</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '~/components/common/input/InputText';
import dateUtility from '~/plugins/dateUtility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
}
},
components: {
Grid,
selectCodeList,
dateUtility,
InputText
// Tree
},
data() {
return {
labelPrepend: true,
modalDataKey:'modalData',
myModalKey: 'eqpmDetlPop',
gridName: 'eqpmDetlGrid',
loadGrid: false,
setGrid:false,
popCheck:false,
dialog: false,
activeRowData: {},
checkedRowDataList: [],
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
InputValue: {
get() {
return this.myBindingData;
}
},
chkDialog(){
return this.dialog
},
},
watch: {
async chkDialog(val){
if(!val){
this.closePop();
}else{
// await this.getRowGridData();
}
},
async popCheck(val){
if(val){
await this.getRowGridData();
this.dialog= true;
}else{
this.dialog=false;
}
}
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { eqpmDetlPop },
});
},
created() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.gridInit();
},
closePop(){
this.popCheck= false;
},
search() {
// this.getData();
},
gridInit(){
// const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const myOptions = {
rowHeaders: ['rowNum'],
columnOptions: {
resizable: true,
minWidth:100
},
setScroll: true,
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
const myColumns= [
{
header : '발생일',
name : 'totDttmDay',
align:'center'
},
{
header : '발생시간대',
name : 'totDttmTime',
align:'center'
},
{
header : '가이드지표명',
minWidth:200,
name : 'gdIdxNm',
},
{
header : '주의',
width:100,
name : 'careStndVal',
align:'center'
},
{
header : '경고',
width:100,
name : 'warnStndVal',
align:'center'
},
{
header : '가이드값',
width:100,
name : 'totVal',
align:'center'
},
{
header : '알람내용',
minWidth:300,
width:'auto',
name : 'alrmMsg',
},
{
header : '알람종류',
name : 'alrmKind',
hidden:true
},
]
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
// this.getRowGridData();
},
async getRowGridData(){
this.loadGrid =false;
var res = await this.postApiReturn({
apiKey: 'selectEqpmDetailPop',
resKey: 'eqpmDetlPopData',
sendParam: {
gdIdxId : this.myBindingData.gdIdxId,
eqpmId : this.myBindingData.eqpmId,
fromDt : this.myBindingData.fromDt,
toDt : this.myBindingData.toDt
},
});
const dayjs = require('dayjs');
var newRes = res.map(item=>
item = {
...item,
totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH'),
}
);
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: newRes,
});
this.loadGrid=true;
this.setGrid = true;
}
},
};
var eqpmDetlPop ={
eqpmDetlGrid:{
data:[],
column:[],
option:{}
}
}
// 전력량 요금(원/kWh)
</script>
<style lang="scss">
// @import '@/assets/scss/common/grid.scss';
.tui-grid-scrollbar-left-bottom {
display: none !important;
}
</style>

463
components/common/modal/EnrgEffcGdIdxDetPop.vue Normal file
View File

@ -0,0 +1,463 @@
<template>
<v-row class="search-box" align="center" no-gutters >
<!-- <v-col v-if="label" cols="2"> -->
<!-- <v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
</label>
</v-col> -->
<!-- <v-col :cols="label ? textCols : ''">
<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-col> -->
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="1400"
overlay-color="#000"
overlay-opacity="0.8"
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"
>
<span class="custom-title-4">{{ '' }}</span>
<v-btn icon tile :ripple="false" @click="closePop()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title> -->
<!-- <v-card-actions> -->
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col :cols="4">
<div class="d-flex align-center justify-space-between pb-5">
<v-card-title class="pa-0">가이드 정보</v-card-title>
</div>
</v-col>
<v-col :cols="8" class="text-right">
<v-btn icon tile :ripple="false" @click="closePop()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
<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="3">
<v-text-field
v-if="dialog"
v-model="InputValue['gdIdxId']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
</v-col>
<v-col :cols="3">
<v-text-field
v-if="dialog"
v-model="InputValue['gdIdxNm']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4">가이드 정보</v-card-title>
</div>
<div class="px-5">
<v-row>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="계산코드"
valueNm="calcProc"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="6">
</v-col>
<v-col :cols="12" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="계산설명"
valueNm="calcDesc"
:iconShow="true"
:labelCols="2"
:textCols="9"
:readonly="true"
/>
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="물리량1"
valueNm="pysclQtyId1"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="물리량2"
valueNm="pysclQtyId2"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="물리량3"
valueNm="pysclQtyId3"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="물리량4"
valueNm="pysclQtyId4"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="카테고리1"
valueNm="ctgr1"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="카테고리2"
valueNm="ctgr2"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="주의기준값"
valueNm="careStndVal"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="6">
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="경고기준값"
valueNm="warnStndVal"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
<v-col :cols="12" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="알람메세지"
valueNm="alrmMsg"
:iconShow="true"
:labelCols="2"
:textCols="9"
:readonly="true"
/>
</v-col>
<v-col :cols="12" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="가이드방법"
valueNm="gdMeth"
:iconShow="true"
:labelCols="2"
:textCols="9"
:readonly="true"
/>
</v-col>
</v-row>
</div>
<div style="height:20px;"></div>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="closePop()">확인</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '~/components/common/input/InputText';
import dateUtility from '~/plugins/dateUtility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
}
},
components: {
Grid,
selectCodeList,
dateUtility,
InputText
// Tree
},
data() {
return {
labelPrepend: true,
modalDataKey:'modalData2',
myModalKey: 'gdIdxDetPop',
gridName: 'gdIdxDetPop',
loadGrid: false,
setGrid:false,
popCheck:false,
dialog: false,
activeRowData: {},
checkedRowDataList: [],
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
InputValue: {
get() {
return this.myBindingData;
}
},
chkDialog(){
return this.dialog
},
},
watch: {
async chkDialog(val){
if(!val){
this.closePop();
}else{
// await this.getRowGridData();
}
},
async popCheck(val){
if(val){
await this.getData();
this.dialog= true;
}else{
this.dialog=false;
}
}
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { gdIdxDetPop },
});
},
created() {
},
mounted(){
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
// this.gridInit();
},
closePop(){
this.popCheck= false;
},
search() {
// this.getData();
},
async getData(){
var res = await this.postApiReturn({
apiKey: 'selectEnrgEffcGdIdxDetPop',
resKey: 'gdIdxDetPopData',
sendParam: {
gdIdxId : this.myBindingData.gdIdxId,
eqpmId : this.myBindingData.eqpmId,
},
});
this.setPageData({
calcProc : res[0].calcProc,
calcDesc : res[0].calcDesc,
pysclQtyId1 : res[0].pysclQtyId1Nm,
pysclQtyId2 : res[0].pysclQtyId2Nm,
pysclQtyId3 : res[0].pysclQtyId3Nm,
pysclQtyId4 : res[0].pysclQtyId4Nm,
ctgr1 : res[0].ctgr1,
ctgr2 : res[0].ctgr2,
warnStndVal : res[0].warnStndVal,
careStndVal : res[0].careStndVal,
alrmMsg : res[0].alrmMsg,
gdMeth : res[0].gdMeth
});
}
},
};
var gdIdxDetPop ={
gdIdxDetGrid:{
data:[],
column:[],
option:{}
}
}
// 전력량 요금(원/kWh)
</script>
<style lang="scss" scoped>
// @import '@/assets/scss/common/grid.scss';
.tui-grid-scrollbar-left-bottom {
display: none !important;
}
#gdIdx_InputText::v-deep .v-input__custom{
margin-left:-60px;
}
.v-input__custom{
margin-left:-60px;
}
</style>

255
components/common/modal/EnrgReadPlacePop2Page.vue Normal file
View File

@ -0,0 +1,255 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
<label for="" class="search-box-label">
{{ item.label }}
<span v-if="item.essential">*</span>
</label>
</v-col>
<v-col :cols="item.label ? 7 : ''">
<v-row>
<v-col cols="3">
<v-text-field
readonly
v-model="selectValue1"
class="v-input__custom"
style="width:100%"
disabled
></v-text-field>
</v-col>
<v-col cols="3">
<v-text-field
readonly
v-model="selectValue2"
class="v-input__custom"
style="width:100%"
disabled
></v-text-field>
</v-col>
<v-col cols="1">
<v-btn
class="v-btn__round v-btn-bg__blue mr-2"
@click="dialog = !dialog"
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-col>
<v-dialog v-model="dialog" scrollable width="640px">
<v-card style="height: 100%">
<v-card-title>
<span class="custom-title-4">검침개소위치</span>
</v-card-title>
<v-card-actions>
<v-col cols="2">
<label for="" class="search-box-label">
검색
</label>
</v-col>
<v-col cols="7">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
></v-text-field>
</v-col>
</v-card-actions>
<v-divider></v-divider>
<v-card-text>
<div ref="rowGridParent" style="height: 300px">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData.selectReadPlcPopList"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
</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-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
item: {
type: Object,
require: true,
},
},
components: {
Grid,
},
data() {
return {
myModalKey: 'selectReadPlcPopList',
gridName: 'rowGrid',
loadGrid: false,
changeData: {},
dialog: false,
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData() {
return this.searchParam['rowGridSelectData'];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue1() {
// 선택된 값
return this.myBindingData && this.myBindingData[this.item.valueNm.cede]
? this.myBindingData[this.item.valueNm.cede]
: null;
},
selectValue2() {
// 선택된 값
return this.myBindingData && this.myBindingData[this.item.valueNm.name]
? this.myBindingData[this.item.valueNm.name]
: null;
},
},
watch: {
async chkDialog(val) {
if (val) {
// 열릴 때
await this.getData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectReadPlcPopList },
});
},
created() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.gridInit();
},
gridInit() {
const gridHeight = 490; // this.$refs.rowGridParent.offsetHeight - 30;
const myOptions = {};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
value: myColumns,
});
},
async getData() {
const res = await this.postApiReturn({
apiKey: 'selectReadPlcPopList',
resKey: 'readPlcData',
sendParam: {
params: { blocId: this.searchParam.blocCodeLists },
isMulti: false,
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
value: res,
});
// setTimeout(
// this.$nextTick(() => {
// if (res.length > 0) {
// // console.log(this.$refs[this.gridName + this.parentPrgmId]);
// this.$refs[this.gridName + this.parentPrgmId].focus({
// rowKey: 0,
// setScroll: true
// });
// }
// });
// 2000
// );
this.loadGrid = true;
},
// sms 목록 그리드 클릭 이벤트
async getRowData(data) {
this.changeData = data;
},
setUpdate() {
this.dialog = false;
this.$emit('gridEditingFinish', {
columnName: this.item.valueNm.cede,
value: this.changeData[this.item.valueNm.cede],
});
this.$emit('gridEditingFinish', {
columnName: this.item.valueNm.name,
value: this.changeData[this.item.valueNm.name],
});
},
},
};
const selectReadPlcPopList = {
rowGrid: {
data: [],
column: [],
option: {},
},
// isMulti: false
};
const myColumns = [
{ header: '검침개소코드', name: 'readPlc', align: 'center' },
{ header: '검침개소명', name: 'readPlcNm' },
{ header: '검침개소종류명', name: 'plcKindNm', align: 'center' },
];
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

575
components/common/modal/EnrgUsePlanModiPop.vue Normal file
View File

@ -0,0 +1,575 @@
<template>
<v-row class="search-box" align="center" no-gutters >
<v-dialog
ref="popModal"
v-model="dialog"
width="900"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-card style="height: 100%">
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col :cols="4">
<InputText
:parentPrgmId="parentPrgmId"
:label="'설비명'"
:valueNm="'eqpmNm'"
:readonly="true"
/>
</v-col>
<v-col :cols="2">
</v-col>
<v-col :cols="3">
</v-col>
<v-col :cols="3" class="text-right">
<v-btn icon tile :ripple="false" @click="closePop()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<!-- <div id="chartParent" ref="chartParent" style="height: 100px"> -->
<div :style="'height: calc(50vh)'">
<div class="d-flex align-center justify-space-between pa-4" style="height: 10%">
<v-card-title class="pa-0 custom-title-4">사용량 계획</v-card-title>
</div>
<!-- <div id="chartParent" ref="chartParent" :style="'height: 80%'"> -->
<div id="chartParent" ref="chartParent" style="height: 70%">
<component
class="w100 h100"
:is="loadChart ? 'Chart' : null"
:parentPrgmId="parentPrgmId"
:modalId="modalId"
:modalDataKey="modalDataKey"
:chartName="chartName"
:ref="chartName"
/>
</div>
<v-divider></v-divider>
<div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;">
<v-row align="center" no-gutters class="pa-5 d-flex align-center justify-center;">
<v-col :cols="5">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols='3'
:textCols='6'
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'대상월'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="5">
<component
:is="'SelectBox'"
ref="SelectBox2"
:labelCols='5'
:textCols='6'
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'전년대비절감율'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="2" class="text-right">
<v-btn color="primary" dark @click="search()">적용</v-btn>
</v-col>
</v-row>
<!-- <div style="height: 70%; width:10%; float: left; border: 1px solid blue; background-color: #A2A2A2">
설정
</div>
<div style="height: 70%; width:90%; margin-left:10%; border: 1px solid blue;">
<v-row align="center" no-gutters class="pa-5 d-flex align-center justify-center;">
<v-col :cols="4">
</v-col>
<v-col :cols="4">
</v-col>
<v-col :cols="2" class="text-right">
<v-btn color="primary" dark @click="setChart()">적용</v-btn>
</v-col>
</v-row>
</div> -->
<!-- <v-row align="center" no-gutters>
<v-row
:cols="12"
class="d-flex align-center justify-space-between pa-3"
>
<v-col :cols="4">
</v-col>
<v-col :cols="4">
</v-col>
<v-col :cols="2" class="text-right">
<v-btn color="primary" dark @click="setChart()">적용</v-btn>
</v-col>
</v-row> -->
</div>
</div>
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
<component
:ref="'gridName' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modifyEnrgUsePlanModalDataKey.modifyEnrgUsePlanModalData"
:parentPrgmId="parentPrgmId"
:bindingData="bindingData"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div> -->
<v-divider></v-divider>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn color="primary" dark @click="setUpdate()">확정</v-btn>
<v-btn color="primary" dark @click="closePop()">취소</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '~/components/common/input/InputText';
import Chart from '~/components/common/Chart';
import SelectBox from '@/components/common/select/SelectBox';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
}
},
components: {
Grid,
selectCodeList,
InputText,
Chart,
SelectBox
// Tree
},
data() {
return {
labelPrepend: true,
chartName: 'modifyEnrgUsePlanChart',
modalId: 'modifyEnrgUsePlanModal',
modalDataKey: 'modifyEnrgUsePlanModalDataKey',
// gridName: 'rowElecContGrid',
loadChart: false,
// selectedTargetMonth: 'all',
dialog: false,
selectValue01: null,
selectValueList01: [],
selectValue02: null,
selectValueList02: [],
nowModalChartData: [],
nowSeriesData: [],
activeRowData: {},
checkedRowDataList: [],
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
// searchParam(state) {
// return state.pageData[this.parentPrgmId];
// },
myBindingData(state) {
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
rowGrid2SelectData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId].rowGrid2SelectData;
} else {
return state.pageData[this.parentPrgmId][this.bindingData]
.rowGrid2SelectData;
}
},
popupDialogFg(state) {
return state.pageData[this.parentPrgmId].popupDialogFg;
}
}),
chkDialog(){
return this.dialog
},
chkPopupDialogFg() {
// 모달 열기/닫기 값
// return this.dialog
return this.popupDialogFg;
},
// get() {
// // if(this.searchParam.rowGridSelectData){
// // return this.searchParam.rowGridSelectData[this.item.valueNm];
// // }
// return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
// },
// set(value) {
// // return value;
// // return this.myBindingData({ [this.item.valueNm]: value });
// //return this.setPageData({ [this.item.valueNm]: value });
// return this.myBindingData({ [this.item.valueNm]: value });
// },
// },
},
watch: {
async chkDialog(val){
if (val) {
// await this.getData();
this.nowModalChartData = this.rowGrid2SelectData;
this.setChart();
} else {
this.closePop();
}
},
chkPopupDialogFg(val) {
this.dialog = val;
},
selectValue01(value){
this.setSelectValueList02();
// if(this.selectValue02 == '0'){
// this.search();
// }else{
// this.setSelectValueList02();
// }
},
selectValue02(value){
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modifyEnrgUsePlanModal: {modifyEnrgUsePlanModalDataKey},
});
},
created() {
this.setSelectValueList01();
this.setSelectValueList02();
this.init();
// if(this.searchParam.isMulti == true){
// this.setPageData({
// facInfoList : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }else{
// this.setPageData({
// facInfo : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setWidgetPageData: 'setWidgetPageData',
setModalChartOption: 'setModalChartOption',
setModalChartSeries: 'setModalChartSeries',
setModalChartTooltip: 'setModalChartTooltip'
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.setChart();
},
setSelectValueList01(){
this.selectValueList01 = [{'text' : '전체', 'value': 'all'}];
for(var i=1; i<=12; i++){
let qty = 'qty' + i.toString().padStart(2, '0');
this.selectValueList01.push(
{
'text' : i+'월',
'value': qty
}
);
}
this.selectValue01 = this.selectValueList01[0].value;
},
setSelectValueList02(){
for(var i=0; i<=100; i+=5){
this.selectValueList02.push(
{
'text' : i + '%',
'value': String(i)
}
);
}
this.selectValue02 = this.selectValueList02[0].value;
},
// 계약 정보 조회
setUpdate() {
this.dialog = false;
let nowSeriesData = this.nowSeriesData;
let nowPlanData = nowSeriesData.filter(item => {
return item.name == '계획';
})[0];
let nowPastData = nowSeriesData.filter(item => {
return item.name == '전년실적';
})[0];
let qtyList = [];
let qtyDict = {};
for(var i=0; i<nowPlanData.data.length; i++){
qtyList.push('qty' + (i+1).toString().padStart(2, '0'));
qtyDict['qty' + (i+1).toString().padStart(2, '0')] = i;
let dt = {
columnName: 'qty' + (i+1).toString().padStart(2, '0'),
value: nowPlanData['data'][i],
// targetRowNum: this.rowGrid2SelectData[1].rowKey,
rowKey: this.rowGrid2SelectData[1].rowKey,
rowEditingFg : true
}
this.$emit('gridEditingFinish', dt);
}
let rowGrid2SelectData = this.rowGrid2SelectData;
let newRowGrid2SelectData = rowGrid2SelectData.map(item => {
qtyList.map(obj => {
if(item.gubun == '2PLAN'){
item[obj] = nowPlanData['data'][qtyDict[obj]];
}else{
item[obj] = nowPastData['data'][qtyDict[obj]];
}
})
return item;
})
this.setPageData({rowGrid2SelectData: newRowGrid2SelectData});
},
closePop(){
this.dialog = false;
this.setPageData({popupDialogFg : false});
this.selectValue01 = this.selectValueList01[0].value;
this.selectValue02 = this.selectValueList02[0].value;
this.nowSeriesData = [];
this.nowModalChartData = [];
},
async setChart(){
this.loadChart = false;
let xAxisData = [];
let seriesData = [];
let data = [];
data = this.nowModalChartData;
let targetMonthList = [];
let _this = this;
let tooltipData = {
trigger:'axis',
confine: true,
axisPointer: {
type: "shadow"
},
// valueFormatter: (value) => '$' +parseFloat(value).toFixed()
formatter: function(params){
var toolTipTitle = params[0].name[0];
let res = "<div style='margin: 0px 0 0;line-height:1;'><div style='font-size:14px;color:#666;font-weight:400;line-height:1;'>"+toolTipTitle+"</div>";
for (var i = 0; i < params.length; i++) {
let tempVal = parseFloat(params[i].value);
if(Number.isFinite(tempVal)){
tempVal = tempVal.toFixed();
}else{
if(!isNaN(tempVal)){
tempVal = 0;
}
}
res += "<div style='margin: 10px 0 0;line-height:1;'><div style='margin: 0px 0 0;line-height:1;'>"
+"<span style='font-size:14px;color:#666;font-weight:400;margin-left:2px'>"+ params[i].marker
+ " "+params[i].seriesName+" "
+"</span>"
+"<span style='float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900'>"
+ _this.numberFormatter(tempVal)
+"</b></span>"
+"</div><div style='clear:both'></div></div>";
}
res += "</div>"
return res;
}
}
for(var i=1; i<=12; i++){
let qty = 'qty' + i.toString().padStart(2, '0');
targetMonthList.push(qty);
xAxisData.push(i);
}
// data = data.map(item => ({
// ...item,
// qty01: Math.floor(Math.random()*100),
// qty02: Math.floor(Math.random()*100),
// qty03: Math.floor(Math.random()*100),
// qty07: Math.floor(Math.random()*100)
// }));
seriesData = data.map(item => ({
name: item.gubun == '2PLAN' ? '계획' : '전년실적',
type: item.gubun == '2PLAN' ? 'line' : 'bar',
data: targetMonthList.map(obj => item[obj] || null)
// data: targetMonthList.map(obj => item[obj] || 0)
}));
this.nowSeriesData = seriesData;
// xAxisData = myKey.map(obj => obj.header);
let option = {
grid: {
top: "3%",
},
xAxis:{
type: 'category',
data: xAxisData
},
yAxis:{
type:'value',
// name: this.unitMapper[this.pageData.energyCd],
nameLocation : 'middle',
nameGap :45
},
legend: {
},
series: seriesData,
tooltip: tooltipData
};
// console.log('option', option);
await this.$nextTick(() => {
});
this.setModalChartOption(
{
prgmId: this.$route.query.prgmId,
chartKey: this.chartName,
modalId: this.modalId,
modalDataKey: this.modalDataKey,
value: option,
}
);
this.loadChart = true;
// this.setModalChartTooltip(
// {
// prgmId: this.$route.query.prgmId,
// chartKey: this.chartName,
// modalId: this.modalId,
// modalDataKey: this.modalDataKey,
// value: tooltipData
// }
// );
},
search() {
// this.setChart();
this.setSeriesData();
},
async setSeriesData(){
this.loadChart = false;
let targetMonth = this.selectValue01;
let targetRatio = (100-this.selectValue02)/100;
let nowSeriesData = this.nowSeriesData;
let seriesData = [];
let sData = [];
let sData2 = [];
sData = nowSeriesData.filter(item => {
return item.name == '전년실적';
})[0]['data'];
sData2 = nowSeriesData.filter(item => {
return item.name == '계획';
})[0]['data'];
// console.log('sData1', sData);
if(targetMonth.includes('qty')){
targetMonth = parseInt(targetMonth.slice(-2));
}
for(var i=0; i<sData.length; i++){
if(targetMonth == 'all' || i+1 == targetMonth){
sData2[i] = sData[i] * targetRatio;
}
}
// console.log('sData2', sData2);
seriesData = nowSeriesData.map(item => ({
...item,
data: item.name == '계획' ? sData2 : item.data
}));
// console.log('seriesData', seriesData);
await this.$nextTick(() => {
});
this.setModalChartSeries(
{
prgmId: this.$route.query.prgmId,
chartKey: this.chartName,
modalId: this.modalId,
modalDataKey: this.modalDataKey,
value: seriesData,
}
);
this.loadChart = true;
this.nowSeriesData = seriesData;
},
numberFormatter(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
},
};
let modifyEnrgUsePlanModalDataKey =
{
modifyEnrgUsePlanChart: Utility.defaultChartOption(true)
};
// 전력량 요금(원/kWh)
</script>

514
components/common/modal/EqpmBaseInfoPop.vue Normal file
View File

@ -0,0 +1,514 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</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-col>
<v-dialog v-model="dialog" scrollable width="540px">
<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-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="12">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols="2"
:textCols="6"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비그룹'"
@update:propsValue="selectValue01 = $event"
:readonly="
item.openMode == undefined
? openMode
: item.openMode == 'ALL'
? false
: true
"
/>
</v-col>
</v-row>
<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>
<!-- <div :style="'height: calc(50vh)'"> -->
<div :style="'height: 429px;'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalDataEqpmBaseInfoPop.eqpmBaseInfoPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '설비 선택',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '설비 선택',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
},
openMode: {
type: Boolean,
require: false,
default: true, // 'ALL'도 있음
},
// bindingFlag:{
// type:Boolean,
// require: false,
// default: false
// }
},
components: {
Grid,
Utility,
SelectBox,
},
data() {
return {
dialog: false,
loadGrid: false,
gridName: 'gridEqpmBaseInfoPop',
myModalKey: 'eqpmBaseInfoPop',
modalDataKey: 'modalDataEqpmBaseInfoPop',
searchWord: '',
selectedData: {},
textFieldData: '',
selectValue01: null,
selectValueList01: [],
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
},
bindingGridEqpmIdList: [],
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
nowGridEqpmIdList(state) {
return state.pageData[this.parentPrgmId]['nowGridEqpmIdList'];
},
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.setSelectValueList01();
await this.getGridData();
}
},
async selectValue01(value) {
await this.search();
},
nowGridEqpmIdList(value) {
this.bindingGridEqpmIdList = value;
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalDataEqpmBaseInfoPop: { eqpmBaseInfoPop },
});
},
async created() {
await this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
async init() {
await this.setSelectValueList01();
this.gridInit();
},
async setSelectValueList01() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { eqpmKindId: this.searchParam.eqpmKindId },
// 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
});
if (res.length > 0) {
this.selectValueList01 = await res.map(obj => {
return {
text: obj.eqpmGrpNm,
value: obj.eqpmGrpId,
};
});
// 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
this.selectValue01 =
this.searchParam.eqpmGrpId != undefined
? this.searchParam.eqpmGrpId
: this.selectValueList01[0].value;
// this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(390, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: [
{ header: '설비ID', name: 'eqpmId', align: 'left' },
{ header: '설비명', name: 'eqpmNm', align: 'left' },
],
});
},
async getGridData() {
this.loadGrid = false;
let res = await this.postApiReturn({
apiKey: 'selectEqpmBaseInfoPop',
resKey: 'epqmBaseInfoData',
sendParam: {
eqpmGrpId: this.selectValue01,
searchWord: this.searchWord,
// openMode : this.item.openMode == undefined ? this.openMode : this.item.openMode
},
});
// grid와 popup eqpmId 값 중복되는 것 제거하는 로직 - 시작
let newRes = [];
if (this.bindingGridEqpmIdList.length > 0) {
newRes = res.filter(item => {
return !this.bindingGridEqpmIdList.includes(item.eqpmId);
});
res = newRes;
}
// grid와 popup eqpmId 값 중복되는 것 제거하는 로직 - 끝
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
// 그리드와 popup eqpmId값 비교하는 로직 지금은 안씀
// let res = this.checkDuplicateEqpmId();
// if(res.includes(this.selectedData.eqpmId)){
// alert('가이드 지표에 이미 등록된 설비입니다.');
// return;
// };
this.dialog = false;
if (!this.item) {
this.textFieldData = this.selectedData.eqpmId;
} else {
//grid와 popup 겹치는 eqpmId값 수정하는 로직 - 시작
let tempBindingGridEqpmIdList = this.bindingGridEqpmIdList;
let idx = tempBindingGridEqpmIdList.indexOf(this.myBindingData.eqpmId);
if (idx < 0) {
tempBindingGridEqpmIdList.push(this.selectedData.eqpmId);
} else {
tempBindingGridEqpmIdList[idx] = this.selectedData.eqpmId;
}
this.setPageData({ nowGridEqpmIdList: tempBindingGridEqpmIdList });
//grid와 popup 겹치는 eqpmId값 수정하는 로직 - 끝
if (this.item.bindNm) {
this.myBindingData[this.item.bindNm] = this.selectedData.eqpmId;
} else {
this.myBindingData.eqpmId = this.selectedData.eqpmId;
}
// this.myBindingData.calcDesc = this.selectedData.calcDesc;
const dt = {
columnName: this.item.valueNm,
value: this.selectedData.eqpmId,
};
this.$emit('gridEditingFinish', dt);
if (this.item.valueNm2 !== undefined) {
const dt = {
columnName: this.item.valueNm2,
value: this.selectedData[this.item.valueNm2],
};
this.$emit('gridEditingFinish', dt);
}
if (this.item.bindNm !== undefined) {
const dt = {
columnName: this.item.bindNm,
value: this.selectedData.eqpmId,
};
this.$emit('gridEditingFinish', dt);
}
}
},
checkDuplicateEqpmId() {
let gridData = this.searchParam.rowGrid.data;
let res = gridData.map(item => {
return item.eqpmId;
});
return res;
},
dialogOpenCloseEvent(val) {
// if(this.item && this.item.disableContent){
// this.dialog = false;
// return;
// }
if (this.myBindingData.length <= 0) {
return alert('설비상세 리스트를 먼저 선택해주세요.');
}
this.dialog = !val;
},
},
};
var eqpmBaseInfoPop = {
gridEqpmBaseInfoPop: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

435
components/common/modal/EqpmCalcPop.vue Normal file
View File

@ -0,0 +1,435 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<v-text-field
:readonly="item.readonly || false"
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-col>
<v-dialog v-model="dialog" scrollable width="540px">
<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-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>
<div :style="'height: calc(50vh)'">
<!-- <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.eqpmCalcPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '이벤트항목',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '이벤트항목',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
},
openMode:{
type:String,
require:false,
}
// bindingFlag:{
// type:Boolean,
// require: false,
// default: false
// }
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'eqpmCalcPop',
modalDataKey: 'modalData2',
searchWord: '',
selectedData: {},
textFieldData: '',
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
},
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
selectValue: {
get() {
// return this.searchParam[this.item.valueNm];
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { eqpmCalcPop },
});
},
async created() {
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: '계산코드', name: 'calcProc', width: 150},
{ header: '아규먼트갯수', name: 'argCnt', align:'center', width: 100},
// { header: '계산설명', name : 'calcDesc', width: 286},
{ header: '계산설명', name : 'calcDesc', align:'left'},
],
});
},
async getGridData() {
this.loadGrid = false;
let res = await this.postApiReturn({
apiKey: 'selectEqpmCalcPop',
resKey: 'eqpmCalcPopData',
sendParam: {
calcDescLike: this.searchWord,
openMode:this.item.openMode != undefined ? this.item.openMode : this.openMode
},
});
if(this.myBindingData['calcProc']!= '' || this.myBindingData['calcProc']!= null || this.myBindingData['calcProc']!=undefined){
let newRes = [];
newRes = res.filter(item => {
return item.calcProc != this.myBindingData['calcProc']
});
res = newRes;
}
// const res = [
// {
// 'calcProc' : 'AVG_CNT2',
// 'argCnt' : '2',
// 'calcDesc' : '두개 변수에 대한 평균'
// }
// ]
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
this.dialog = false;
if (!this.item) {
this.textFieldData = this.selectedData.calcProc;
} else {
if (this.item.bindNm) {
this.myBindingData[this.item.bindNm] = this.selectedData.argCnt;
} else {
this.myBindingData.argCnt = this.selectedData.argCnt;
}
const dt = {
columnName: this.item.valueNm,
value: this.selectedData.calcProc,
};
this.$emit('gridEditingFinish', dt);
this.setPageData({ [this.item.valueNm] : this.selectedData.calcProc});
if (this.item.valueNm2 !== undefined) {
const dt = {
columnName: this.item.valueNm2,
value: this.selectedData[this.item.valueNm2],
};
this.$emit('gridEditingFinish', dt);
this.setPageData({[this.item.valueNm2] : this.selectedData.argCnt});
}
if (this.item.bindNm !== undefined) {
const dt = {
columnName: this.item.bindNm,
value: this.selectedData.argCnt,
};
this.$emit('gridEditingFinish', dt);
this.setPageData({ [this.item.bindNm] : this.selectedData.argCnt});
}
}
},
dialogOpenCloseEvent(val) {
// if(this.item && this.item.disableContent){
// this.dialog = false;
// return;
// }
this.dialog = !val;
},
},
};
var eqpmCalcPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

421
components/common/modal/EqpmPop.vue Normal file
View File

@ -0,0 +1,421 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ labelContent }}
</label>
</v-col>
<v-col :cols="textCols">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="required || false"
:disabled="disabled || false"
></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ modalTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="3">
<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="5">
<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>
<div :style="'height: calc(50vh)'">
<!-- <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.eqpmPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '설비명',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '설비목록',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
required: {
require: false,
default: false,
},
disabled: {
require: false,
default: false,
},
bindOption: {
type: Object,
requrie: false,
default: null,
},
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'eqpmPop',
modalDataKey: 'modalData2',
searchWord: '',
selectedData: {},
textFieldData: '',
parentModalState: 'close',
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
},
set(value) {
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
parentModalState(val) {
if (this.bindOption !== null) {
if (val === 'open') {
this.textFieldData = this.searchParam.rowGridSelectData.eqpmNm;
this.searchParam[
this.bindOption.eqpmId
] = this.searchParam.rowGridSelectData.eqpmId;
this.searchParam[
this.bindOption.eqpmNm
] = this.searchParam.rowGridSelectData.eqpmNm;
} else if (val === 'openWithInit') {
this.textFieldData = '';
this.searchParam[this.bindOption.eqpmId] = '';
this.searchParam[this.bindOption.eqpmNm] = '';
}
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { eqpmPop },
});
},
created() {
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
this.textFieldData = '';
this.selectedData.eqpmId = '';
this.selectedData.eqpmNm = '';
if (this.bindOption === null) {
this.setPageData({
modalEqpmId: '',
modalEqpmNm: '',
});
} else {
this.setPageData({
[this.bindOption.eqpmId]: '',
[this.bindOption.eqpmNm]: '',
});
}
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
const _this = this;
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: '회사 ID', name: 'comId', hidden: true },
{ header: '설비 ID', name: 'eqpmId', width: 100, align: 'center' },
{ header: '설비명', name: 'eqpmNm', width: 150, align: 'center' },
{
header: '설비 유형',
name: 'eqpmKind',
width: 100,
align: 'center',
formatter({ value }) {
let retVal = '';
const newValue = _this.searchParam.eqpmKindList.filter(
item => item.commCd == value,
);
if (newValue.length > 0) {
retVal = newValue[0].commCdNm;
}
return retVal;
},
},
{
header: '설비 그룹',
name: 'eqpmGrpId',
width: 100,
align: 'center',
formatter({ value }) {
let retVal = '';
const newValue = _this.searchParam.eqpmGrpList.filter(
item => item.eqpmGrpId == value,
);
if (newValue.length > 0) {
retVal = newValue[0].eqpmGrpNm;
}
return retVal;
},
},
{
header: '사업장',
name: 'blocId',
width: 88,
align: 'center',
formatter({ value }) {
let retVal = '';
const newValue = _this.searchParam.blocIdList.filter(
item => item.blocId == value,
);
if (newValue.length > 0) {
retVal = newValue[0].blocNm;
}
return retVal;
},
},
],
});
},
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectEqpmBaseInfo',
resKey: 'eqpmBaseInfoData',
sendParam: {
eqpmNmLike: this.searchWord,
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
this.dialog = false;
this.textFieldData = this.selectedData.eqpmNm;
if (this.bindOption === null) {
this.searchParam.modalEqpmId = this.selectedData.eqpmId;
this.searchParam.modalEqpmNm = this.selectedData.eqpmNm;
} else {
this.searchParam[this.bindOption.eqpmId] = this.selectedData.eqpmId;
this.searchParam[this.bindOption.eqpmNm] = this.selectedData.eqpmNm;
}
this.setPageData({ isFind: true });
},
dialogOpenCloseEvent(val) {
this.dialog = !val;
},
},
};
var eqpmPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

563
components/common/modal/EqpmSelectPop.vue Normal file
View File

@ -0,0 +1,563 @@
<template>
<v-row class="search-box" align="center" no-gutters >
<v-col :cols="labelCols">
<label for="" class="search-box-label">
<v-icon v-if="iconShow"
x-small
:color="required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ label }}
</label>
</v-col>
<v-col :cols="textCols">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="required || false"
:disabled="disabled || false"
></v-text-field>
</v-col>
<v-dialog
ref="popModal"
v-model="dialog"
width="1400"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-card style="height: 100%">
<v-divider></v-divider>
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4">◇ 설비 선택</v-card-title>
</div>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 설비그룹 -->
<component
:is="'SelectBox'"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비그룹'"
:disabled="eqpmGrpDisabled"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="6" style="padding:0px 10px;">
<!-- FAB -->
<component
:is="'SelectBoxMulti'"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'FAB'"
:labelCols="2"
:multiple="true"
:disabled="fabDisabled"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-spacer></v-spacer>
<v-col cols="3" class="text-right">
<v-btn :ripple="false" @click="search()">
조회
</v-btn>
<!-- <v-btn :ripple="false" @click="initSearch()">
초기화
</v-btn> -->
</v-col>
</v-row>
<v-row align="center" no-gutters style="margin-top: 14px;">
<v-col :cols="1">
<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="3">
<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>
</div>
<div class="px-5" style="height:429px;">
<div ref="modalGridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid? 'Grid' : null"
:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop"
:gridName="gridName"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
/>
</div>
</div>
<v-divider></v-divider>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '~/components/common/input/InputText';
import dateUtility from '~/plugins/dateUtility';
import SelectBox from '@/components/common/select/SelectBox';
import SelectBoxMulti from '@/components/common/select/SelectBoxMulti';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
},
disabled:{
type:Boolean,
require:false,
default:false
},
required:{
type:Boolean,
require:false,
default:false
},
fabDisabled:{
type:Boolean,
require:false,
default:false
},
eqpmGrpDisabled:{
type:Boolean,
require:false,
default:false
},
iconShow:{
type:Boolean,
require:false,
default:true
},
isMulti:{
type:Boolean,
require:false,
default:false
}
},
components: {
Grid,
selectCodeList,
dateUtility,
InputText,
SelectBox,
SelectBoxMulti
// Tree
},
data() {
return {
labelPrepend: true,
modalDataKey:'eqpmSelectPopData',
myModalKey: 'eqpmSelectPop',
gridName: 'eqpmSelectGrid',
loadGrid: false,
setGrid:false,
popCheck:false,
dialog: false,
activeRowData: {},
checkedRowDataList: [],
selectValue01:null,
selectValue02:[],
selectValueList01:[],
selectValueList02:[],
searchWord:'',
activeRowData:{},
textFieldData:'',
selectRow:{}
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
var data = state.pageData[this.parentPrgmId];
if(data.fabId == ''){
data.fabId = null
}else if(typeof(data.fabId)=='string'){
data.fabId = [data.fabId]
}
return {
fabId : data.fabId,
eqpmGrpId : data.eqpmGrpId,
eqpmId:data.eqpmId,
eqpmNm:data.eqpmNm,
eqpmIdList:data.eqpmIdList,
eqpmKindId:data.eqpmKindId,
}
},
}),
selectValue: {
get() {
// return this.searchParam[this.item.valueNm];
return this.myBindingData
? this.myBindingData[this.valueNm]
: this.textFieldData;
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
chkDialog(){
if(this.isMulti){
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{type : 'checkbox'}];
}else{
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [];
}
return this.dialog
},
},
watch: {
async chkDialog(val){
// console.log("val : ", val);
if(val){
this.selectValue01 = this.myBindingData.eqpmGrpId;
this.selectValue02 = this.myBindingData.fabId;
await this.search();
// if(this.isMulti){
// }else{
// // 단일 focus용
// if(this.$refs[this.gridName]){
// this.selectRow = this.$refs[this.gridName].getData().filter(item=>{
// return item.eqpmId == this.myBindingData.eqpmId
// });
// this.$refs[this.gridName].focus({
// rowKey : this.selectRow[0].rowKey,
// setScroll: true
// })
// }
// }
}else{
this.dialog = false;
}
// this.selectValue01 = this.myBindingData.eqpmGrpId;
// this.selectValue02 = this.myBindingData.fabId;
// await this.search();
// this.getChecked();
// }
},
},
beforeCreate() {
this.$store.commit('setPageData', {
eqpmSelectPopData: { eqpmSelectPop },
});
},
async created() {
await this.getFab();
await this.getEqpmGrp();
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
dialogOpenCloseEvent(val){
// this.checkPop = !val;
this.dialog=!val;
},
search() {
this.getRowGridData();
},
async getFab() {
let res = await this.postApiReturn({
apiKey: 'selectFabCodeList',
resKey: 'fabCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
return {
text: item.eccNm,
value: item.eccId,
};
});
this.selectValueList02.unshift({
text:"전체",
value:null
});
// if(this.pageData.eccId != null && this.pageData.eccId != ''){
// this.selectValue02 = this.pageData.eccId;
// }else if(this.pageData.eccId == null || this.pageData.eccId == ''){
this.selectValue02.push(this.selectValueList02[0].value);
// }
} else {
this.selectValueList02 = [];
this.selectValue02 = [];
}
},
async getEqpmGrp() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { },
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
};
});
this.selectValueList01.unshift({
text:"전체",
value:null
});
// if(this.pageData.eqpmGrpId != null && this.pageData.eqpmGrpId != ''){
// this.selectValue02 = this.pageData.eqpmGrpId;
// }else if(this.pageData.eqpmGrpId == null || this.pageData.eqpmGrpId == ''){
this.selectValue01 = this.selectValueList01[0].value;
// }
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
},
gridInit(){
// console.log("modalGridParent : ",this.$refs)
// const gridWidth = this.$refs.modalGridParent.offsetWidth/4;
let myOptions = {
columnOptions: {
resizable: true,
},
// rowHeaders:[{ type: 'checkbox' }],
// rowHeight:'auto'
};
if(this.isMulti){
myOptions['rowHeaders'] = [{type : 'checkbox'}];
myOptions['rowHeight'] = 'auto';
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
const myColumns= [
{
header : 'FAB',
name : 'fabId',
align:'center',
hidden:true
},
{
header : 'FAB',
name : 'fabNm',
align:'center'
},
{
header : '설비ID',
name : 'eqpmId',
align:'center',
// hidden:true
},
{
header : '설비명',
name : 'eqpmNm',
align:'center'
},
{
header : 'eccId',
name : 'eccId',
align:'center',
hidden:true
},
{
header : 'eccNm',
name : 'eccNm',
align:'center',
hidden:true
},
]
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
// this.getRowGridData();
},
async getRowGridData(){
this.loadGrid =false;
var res = await this.postApiReturn({
apiKey: 'selectEqpmPop',
resKey: 'eqpmPopData',
sendParam: {
fabId:this.selectValue02,
eqpmGrpId:this.selectValue01,
searchWord:this.searchWord,
eqpmKindId:this.myBindingData.eqpmKindId,
},
});
// const dayjs = require('dayjs');
// var newRes = res.map(item=>
// item = {
// ...item,
// totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
// totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH')
// }
// );
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res
});
this.loadGrid=true;
this.$nextTick(()=>{
if(this.isMulti){
this.getChecked();
}
});
},
setUpdate() {
if(this.isMulti){
var data = this.$refs[this.gridName].getCheckedRowsEvt();
this.dialog = false;
this.setPageData({
checkedRows: data,
eqpmId : data.map(item=>{
return item.eqpmId;
}),
eqpmNm : data.map(item=>{
return item.eqpmNm;
}),
eqpmIdList:data,
isFind2:true
});
}else{
this.dialog = false;
this.setPageData({eqpmInfo : this.activeRowData, eqpmNm : this.activeRowData.eqpmNm})
}
},
getRowData(data){
if(this.isMulti){
if(data._attributes.checked){
this.$refs[this.gridName].uncheckEvt(data, this.$refs[this.gridName]);
}else{
this.$refs[this.gridName].checkEvt(data, this.$refs[this.gridName]);
}
}else{
this.activeRowData = data;
}
},
getChecked(){
if(this.myBindingData.eqpmIdList.length>0){
this.myBindingData.eqpmIdList.map(item=>{
this.$refs[this.gridName].checkEvt(item, this.$refs[this.gridName]);
});
}
}
},
};
var eqpmSelectPop ={
eqpmSelectGrid:{
data:[],
column:[],
option:{}
}
}
</script>

358
components/common/modal/ErcChrgInfoMngPop.vue Normal file
View File

@ -0,0 +1,358 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col :cols="label ? textCols : ''">
<!-- <v-col :cols="label ? 9 : ''"> -->
<!-- :value="textfield" -->
<v-btn @click="dialog = !dialog" class="v-input__custom">
단가보기
</v-btn>
</v-col>
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="850"
overlay-color="#000"
overlay-opacity="0.8"
>
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
</v-card-title>
<!-- <div :style="'height: calc(50vh)'"> -->
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="gridParent" style="height: 150px">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData.ErcChrgInfoMngPop"
:parentPrgmId="parentPrgmId"
/>
</div>
<!-- </div> -->
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: true,
// default: "공정/설비"
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
height: {
type: Number,
default: 713,
},
eqpmYn: {
type: Number,
require: false,
default: 1,
},
popTitle: {
type: String,
require: false,
default: '',
},
},
components: {
Grid,
Utility,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'ErcChrgInfoMngPop',
gridName: 'modalGrid',
loadGrid: false,
dialog: false,
modalDataKey: 'modalData',
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
selectValue() {},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { ErcChrgInfoMngPop },
});
},
created() {
this.init();
},
mounted() {
// console.log("###",this.$refs.gridParent)
// console.log("###",this.$refs.popModal)
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 그리드 세팅
gridInit() {
// const gridHeight = this.$refs.gridParent.offsetHeight - 36;
const myOptions = {
columOptions: {
resizeable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(
Utility.defaultGridOption(150, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
},
// 그리드 데이터 설정
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectElecPowChrgInfo',
resKey: 'elecPowChrgInfoData',
sendParam: {
elecContId: this.searchParam.elecContId,
},
});
function setRowSpanAttribute(
res,
targetAttributeName,
targetAttributeList,
) {
if (!(res.length && res.length >= 1)) {
return;
}
if (targetAttributeList == undefined) {
var currentCnt = 1;
var currentIdx = 0;
var currentValue = res[0][targetAttributeName];
for (var i = 1; i < res.length; i++) {
if (res[i][targetAttributeName] != currentValue) {
if (res[currentIdx]['_attributes'] == undefined) {
res[currentIdx]['_attributes'] = { rowSpan: new Object() };
}
res[currentIdx]['_attributes']['rowSpan'][
targetAttributeName
] = currentCnt;
currentValue = res[i][targetAttributeName];
currentCnt = 1;
currentIdx = i;
} else if (
res[i][targetAttributeName] == currentValue &&
i == res.length - 1
) {
currentCnt = currentCnt + 1;
if (res[currentIdx]['_attributes'] == undefined) {
res[currentIdx]['_attributes'] = { rowSpan: new Object() };
}
res[currentIdx]['_attributes']['rowSpan'][
targetAttributeName
] = currentCnt;
} else {
currentCnt = currentCnt + 1;
}
}
} else {
var currentCnt = 1;
var currentIdx = 0;
for (var i = 1; i < res.length; i++) {
if (!compareValue(res, targetAttributeList, currentIdx, i)) {
if (res[currentIdx]['_attributes'] == undefined) {
res[currentIdx]['_attributes'] = { rowSpan: new Object() };
}
if (currentCnt != 1) {
res[currentIdx]['_attributes']['rowSpan'][
targetAttributeName
] = currentCnt;
}
currentCnt = 1;
currentIdx = i;
} else if (
compareValue(res, targetAttributeList, currentIdx, i) &&
i == res.length - 1
) {
currentCnt = currentCnt + 1;
if (res[currentIdx]['_attributes'] == undefined) {
res[currentIdx]['_attributes'] = { rowSpan: new Object() };
}
if (currentCnt != 1) {
res[currentIdx]['_attributes']['rowSpan'][
targetAttributeName
] = currentCnt;
}
} else {
currentCnt = currentCnt + 1;
}
}
}
function compareValue(res, targetAttributeList, currentIdx, targetIdx) {
for (var i = 0; i < targetAttributeList.length; i++) {
if (
res[currentIdx][targetAttributeList[i]] !=
res[targetIdx][targetAttributeList[i]]
) {
return false;
}
}
return true;
}
}
setRowSpanAttribute(res, 'elecContKindNm');
setRowSpanAttribute(res, 'voltKindNm');
setRowSpanAttribute(res, 'optKindNm');
setRowSpanAttribute(res, 'baseChrg');
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
// row 클릭이벤트
getRowData(data) {},
search() {
this.getGridData();
},
dialogOpenCloseEvent(val) {
this.dialog = !val;
},
},
};
const ErcChrgInfoMngPop = {
modalGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
const myColumns = [
{ header: '전력계약 ID', name: 'eleclContId', hidden: true },
{ header: '전력계약 명', name: 'eleclContNm', hidden: true },
{ header: '전력계약구분CD', name: 'elecContKind', hidden: true },
{ header: '전력계약구분', name: 'elecContKindNm', align: 'center' },
{ header: '전압구분CD', name: 'voltKind', hidden: true },
{ header: '전압구분', name: 'voltKindNm', align: 'center' },
{ header: '옵션CD', name: 'optKind', hidden: true },
{ header: '옵션', name: 'optKindNm', align: 'center' },
{
header: '기본요금(원/kW)',
name: 'baseChrg',
align: 'right',
formatter({ value }) {
return Utility.setFormatInt(value);
},
},
{ header: '시간대CD', name: 'peakKind', hidden: true },
{ header: '시간대', name: 'peakKindNm', align: 'center' },
{
header: '여름철(6~8월)',
name: 'unitPrcSum',
align: 'right',
formatter({ value }) {
return Utility.setFormatIntDecimal(value, 1);
},
},
{
header: '봄·가을철(3~5,9~10월)',
name: 'unitPrcSprfal',
align: 'right',
formatter({ value }) {
return Utility.setFormatIntDecimal(value, 1);
},
},
{
header: '겨울철(11~2월)',
name: 'unitPrcWin',
align: 'right',
formatter({ value }) {
return Utility.setFormatIntDecimal(value, 1);
},
},
];
</script>

204
components/common/modal/EtcStatPopPage.vue Normal file
View File

@ -0,0 +1,204 @@
<template>
<v-banner>
<div
class="d-flex align-center justify-space-between"
style="cursor:pointer"
@click="dialog = !dialog"
>
<v-card-subtitle class="pa-0">통신이상</v-card-subtitle>
<v-avatar
size="36"
:color="isDarkMode ? '#fb8200' : '#fdab3d'"
min-width="72"
class="font-weight-bold text-color--white-0"
>{{ pointEtc }}</v-avatar
>
</div>
<v-dialog v-model="dialog" scrollable width="600px">
<v-card style="height: 100%">
<v-card-title>
<span class="custom-title-4">통신이상 개소 조회</span>
</v-card-title>
<v-card-actions>
<v-col>
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
v-model="searchWord"
@keyup.enter="typeEnterKey"
></v-text-field>
</v-col>
</v-card-actions>
<v-divider></v-divider>
<v-card-text>
<div ref="rowGridParent" style="height: 300px">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.etcData.selectEtcReadPlc"
:parentPrgmId="parentPrgmId"
/>
</div>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark>확인</v-btn>
<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-banner>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid2';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
pointEtc: {
type: Number,
require: true,
},
},
components: {
Grid,
},
data() {
return {
modalDataKey: 'etcData',
myModalKey: 'selectEtcReadPlc',
gridName: 'etcGrid',
loadGrid: false,
searchWord: '',
dialog: false,
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
isDarkMode: 'isDarkMode',
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
},
watch: {
async chkDialog(val) {
if (val) {
// 열릴 때
await this.getData();
} else {
// 닫힐 때
}
},
},
beforeCreate() {
if (this.$store.state.activeMenuInfo.prgmId == '0') {
this.$store.state.activeMenuInfo.prgmId = this.$route.query.prgmId;
}
this.$store.commit('setPageData', {
etcData: { selectEtcReadPlc },
});
// console.log("2.vue::beforeCreate");
},
created() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
// setTree: "modules/list/setTree"
}),
init() {
this.gridInit();
},
gridInit() {
const gridHeight = 290; // this.$refs.rowGridParent.offsetHeight - 30;
const myOptions = {
//rowHeaders: ["checkbox"]
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
},
async getData() {
this.loadGrid = false;
let sendParams = {
readPlcNm: this.searchWord,
};
const res = await this.postApiReturn({
apiKey: 'selectEtcReadPlc',
resKey: 'etcData',
sendParam: sendParams,
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
// 검색
typeEnterKey() {
this.getData();
},
},
};
const selectEtcReadPlc = {
etcGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
const myColumns = [
{ header: '사업장', name: 'blocNm', width: 100, align: 'center' },
{ header: '에너지원', name: 'readObjNm', width: 100, align: 'center' },
/*{ header: "검침개소코드", name: "readPlcId", width:100 , align:"center"},*/
{ header: '검침개소명', name: 'readPlcNm', width: 240 },
{ header: '값', name: 'useVal', width: 100, align: 'right' },
];
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

436
components/common/modal/EvtObjPop.vue Normal file
View File

@ -0,0 +1,436 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</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-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-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>
<!-- <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)"
/>
</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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '이벤트항목',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '이벤트항목',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
}
// bindingFlag:{
// type:Boolean,
// require: false,
// default: false
// }
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'evtObjPop',
modalDataKey: 'modalData2',
searchWord: '',
selectedData: {},
textFieldData: '',
formFlag: this.item.formFg != undefined ? this.item.formFg : true,
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
},
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
selectValue: {
get() {
if(this.formFlag){
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
}else{
// grid와 바인딩 안했을 때
return this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { evtObjPop },
});
},
created() {
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(570, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: 'TAG ID', name: 'tagId' },
{ header: 'TAG 명', name: 'tagNm' },
],
});
},
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectTagBaseInfo',
resKey: 'tagBaseInfoData',
sendParam: {
tagNmLike: this.searchWord,
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
// 초기화
if(v == 'init'){
this.selectedData.tagId = null;
this.selectedData.tagNm = null;
}
this.dialog = false;
if (!this.item) {
this.textFieldData = this.selectedData.tagId;
} else {
// let formFg = this.item.formFg != undefined ? this.item.formFg : this.formFg;
if(this.formFlag){
if (this.item.bindNm) {
this.myBindingData[this.item.bindNm] = this.selectedData.tagNm;
} else {
this.myBindingData.tagNm = this.selectedData.tagNm;
}
// this.myBindingData.tagNm = this.selectedData.tagNm;
const dt = {
columnName: this.item.valueNm,
value: this.selectedData.tagId,
};
this.$emit('gridEditingFinish', dt);
if (this.item.valueNm2 !== undefined) {
const dt = {
columnName: this.item.valueNm2,
value: this.selectedData[this.item.valueNm2],
};
this.$emit('gridEditingFinish', dt);
}
if (this.item.bindNm !== undefined) {
const dt = {
columnName: this.item.bindNm,
value: this.selectedData.tagNm,
};
this.$emit('gridEditingFinish', dt);
}
}else{
// grid와 binding 안되어있는 경우
this.textFieldData = this.selectedData.tagNm;
this.setPageData({
tagId: this.selectedData.tagId,
// [this.item.tagNm]: this.selectedData.tagNm
});
}
}
},
dialogOpenCloseEvent(val) {
// if(this.item && this.item.disableContent){
// this.dialog = false;
// return;
// }
this.dialog = !val;
},
},
};
var evtObjPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

357
components/common/modal/FixedValueModiPop.vue Normal file
View File

@ -0,0 +1,357 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<!-- <v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon> -->
<!-- {{ label }} -->
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-btn
readonly
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialog2 = !dialog2"
outlined
:hide-details="true"
>{{ label }}</v-btn
>
</v-col>
<v-dialog v-model="dialog2" scrollable width="540px">
<v-card style="height: 100%">
<v-card-title>
<span class="custom-title-4">사용자 조회</span>
</v-card-title>
<v-card-actions>
<v-row>
<v-col :cols="7">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
v-model="searchWord"
@keyup.enter="typeEnterKey"
></v-text-field>
</v-col>
<v-col :cols="5" class="text-right">
<v-btn :ripple="false" @click="getData()">조회</v-btn>
<BtnExcelDownload
:ref="'excelButton01'"
:parentPrgmId="parentPrgmId"
:gridName="gridName"
:parentModalDataName="'modalData2'"
:myModalKey="myModalKey"
/>
<v-btn :ripple="false" @click="saveGridData()">저장</v-btn>
</v-col>
</v-row>
</v-card-actions>
<v-divider></v-divider>
<v-card-text>
<div ref="rowGridParent" style="height: 300px">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog2 ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData2.selectFixedValueModiPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
/>
</div>
</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="dialog2 = false">닫기</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import Buttons from '~/components/common/button/Buttons';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
components: {
Grid,
BtnExcelDownload,
Buttons,
},
data() {
return {
label: '고정값 수정',
modalDataKey: 'modalData2',
myModalKey: 'selectFixedValueModiPop',
gridName: 'rowGrid',
loadGrid: false,
searchWord: '',
dialog2: false,
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog2;
},
},
watch: {
async chkDialog(val) {
if (val) {
// 열릴 때
console.log('dsfafds');
await this.getData();
// console.log("chkDialog: ", val);
// if(this.searchParam.selecUserList.length > 0){
// for(var i=0; i<this.searchParam.selecUserList.length; i++) {
// this.$refs[this.gridName + this.parentPrgmId].checkEvt(this.searchParam.selecUserList[i], this.$refs[this.gridName + this.parentPrgmId]);
// }
// }
// this.$refs[this.gridName + this.parentPrgmId].setCheck(
// this.searchParam.selecUserListRowKeys
// );
} else {
// 닫힐 때
this.setPageData({
myUserList: null,
});
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { selectFixedValueModiPop },
});
// console.log("2.vue::beforeCreate");
},
created() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
postUpdateApi: 'modules/list/postUpdateApi',
// setTree: "modules/list/setTree"
}),
init() {
this.gridInit();
},
async saveGridData() {
this.loadGrid = false;
let dataArr = this.$refs[this.gridName + this.parentPrgmId].save();
// this.setPageData({ isFind: true });
for (var i = 0; i < dataArr.length; i++) {
if (
dataArr[i].addInfoDataKind == 'NUM' &&
dataArr[i].addInfoVal == ''
) {
dataArr[i].addInfoVal = null;
}
}
console.log('dataArr', dataArr);
if (dataArr.length > 0) {
const sendParam = {
datas: {
fixedValModiPopDatas: dataArr.map(item => ({
...item,
})),
},
params: {},
};
await this.postUpdateApi({
apiKey: 'savefixedValModiPopDatas',
sendParam: sendParam,
});
await this.getData();
this.loadGrid = true;
this.setPageData({ isFind: true });
} else {
this.loadGrid = true;
alert('저장할 내용이 없습니다.');
}
},
gridInit() {
const gridHeight = 490; // this.$refs.rowGridParent.offsetHeight - 30;
const myOptions = {
// rowHeaders: ["checkbox"]
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
},
async getData() {
this.loadGrid = false;
let sendParams = {
search: this.searchWord,
// userNo: '',
// userLoginId: '',
// deptId: ''
};
const res = await this.postApiReturn({
apiKey: 'selectFixedValueModiPop',
resKey: 'tagFixedValData',
sendParam: sendParams,
});
const newRes = res.map(item => {
const newObj = {
...item,
rowStat: null,
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
};
return newObj;
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: newRes,
});
this.loadGrid = true;
},
// 공정/설비 트리 row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
if (data._attributes.checked) {
this.$refs[this.gridName + this.parentPrgmId].uncheckEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
} else {
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
}
},
// setUpdate() {
// // console.log("이게뭐야", this.$refs[this.gridName + this.parentPrgmId])
// console.log("adsfasdfasdfasf", this.$refs[ this.gridName + this.parentPrgmId].getData());
// // let gridInstance = this.$refs[ this.gridName + this.parentPrgmId];
// // const saveTargetRows = gridInstance.invoke("getModifiedRows");
// // console.log('saveTargetRows', saveTargetRows);
// let dataArr = this.$refs[ this.gridName + this.parentPrgmId].save();
// this.dialog2 = false;
// this.setPageData({
// selecUserList: this.$refs[
// this.gridName + this.parentPrgmId
// ].getCheckedRowsEvt()
// });
// // this.setPageData({
// // selecUserListRowKeys: this.$refs[
// // this.gridName + this.parentPrgmId
// // ].getCheckedRowKeys()
// // });
// },
// 검색
typeEnterKey() {
this.getData();
},
},
};
const selectFixedValueModiPop = {
rowGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
defaultRow: {
eccId: '',
readObjId: '',
ucId: '',
tagId: '',
tagNm: '',
dfltVal: '',
userVal: '',
rowStat: null,
},
buttonAuth: {
add: false,
remove: false,
save: true,
excel: true,
},
},
eqpmYn: 1,
xlsFileInfo: {
// 출력하려는 grid 와 같은 이름으로 세팅
rowGrid: {
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
sheetName: null, // 갑이 없으면 'Sheet1'
},
},
};
const myColumns = [
{ header: '공정ID', name: 'eccId', align: 'left', hidden: true },
{ header: '에너지ID', name: 'readObjId', align: 'left', hidden: true },
{ header: '케이스명', name: 'ucId', align: 'left', hidden: true },
{ header: '태그ID', name: 'tagId', align: 'left', hidden: true },
{ header: '태그명(R)', name: 'tagNm', align: 'left' },
{ header: '디폴트값(R)', name: 'dfltVal', align: 'right' },
{
header: '사용자 세팅값(E)',
name: 'userVal',
align: 'right',
editor: 'text',
},
];
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

411
components/common/modal/FtnPlcFormPop.vue Normal file
View File

@ -0,0 +1,411 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</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"
></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="700px">
<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-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="3">
<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="5">
<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>
<!-- <div :style="'height: calc(65vh)'"> -->
<div :style="'height: 429px;'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 w100 py-3">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.modalData3.FtnPlcFormPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '공정',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '공정',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
},
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'FtnPlcFormPop',
modalDataKey: 'modalData3',
searchWord: '',
selectedData: {},
textFieldData: '',
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
},
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData3: { FtnPlcFormPop },
});
},
created() {
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
let myOptions = {
treeColumnOptions: {
name: 'eccNm',
useIcon: true,
},
scrollX: false,
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(390, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [{ header: '위치정보', name: 'eccNm' }],
});
},
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectEccBaseInfo',
resKey: 'eccBaseInfoData',
sendParam: {
blocId: this.myBindingData.blocId,
eqpmYn: '0',
search: this.searchWord,
},
});
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'ECC_ID',
value: res.map(item => ({
...item,
eccNm: item.eccNm,
})),
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
this.dialog = false;
const dt = {
columnName: this.item.valueNm,
value: this.selectedData['eccId'],
};
const dt2 = {
columnName: this.item.valueNm2,
value: this.selectedData['eccNm'],
};
if (!this.item.eccFgYn) {
this.myBindingData.upEccNm = this.selectedData.eccNm;
this.myBindingData.upEccId = this.selectedData.eccId;
this.$emit('gridEditingFinish', dt);
this.$emit('gridEditingFinish', dt2);
} else {
if (this.selectedData.eccFg == '1') {
this.myBindingData.upEccNm = this.selectedData.eccNm;
this.myBindingData.upEccId = this.selectedData.eccId;
this.$emit('gridEditingFinish', dt);
this.$emit('gridEditingFinish', dt2);
} else {
alert('공정(ECC)을 선택해주세요.');
return false;
}
}
},
dialogOpenCloseEvent(val) {
this.dialog = !val;
},
},
};
var FtnPlcFormPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
content: none !important;
}
.tui-grid-tree-icon {
margin-left: -21px !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>

413
components/common/modal/FtnPlcMultiFormPop.vue Normal file
View File

@ -0,0 +1,413 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</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="searchParam.clickOnOff ? '' : dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<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-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="3">
<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="5">
<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>
<div :style="'height: calc(50vh)'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.modalData3.FtnPlcMultiFormPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '공정',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '공정',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
},
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'FtnPlcMultiFormPop',
modalDataKey: 'modalData3',
searchWord: '',
selectedData: {},
textFieldData: '',
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
},
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
clickOnOff(state) {
return state.pageData[this.parentPrgmId]['clickOnOff'];
},
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData3: { FtnPlcMultiFormPop },
});
},
created() {
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
let myOptions = {
treeColumnOptions: {
name: 'eccNm',
useIcon: true,
},
scrollX: false,
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [{ header: '위치정보', name: 'eccNm' }],
});
},
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectFtnPlcListTree',
resKey: 'ftnPlcTreeDatas',
sendParam: {
blocId: this.searchParam.blocIdList[this.searchParam.blocId].blocId,
eqpmYn: '0',
search: this.searchWord,
roiId: this.searchParam.energyList[this.searchParam.energyCd].cd,
},
});
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'ECC_ID',
value: res.map(item => ({
...item,
eccNm: item.eccNm,
})),
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
this.dialog = false;
const dt = {
columnName: this.item.valueNm,
value: this.selectedData['eccId'],
};
const dt2 = {
columnName: this.item.valueNm2,
value: this.selectedData['eccNm'],
};
if (!this.item.eccFgYn) {
this.myBindingData.upEccNm = this.selectedData.eccNm;
this.myBindingData.upEccId = this.selectedData.eccId;
this.$emit('gridEditingFinish', dt);
this.$emit('gridEditingFinish', dt2);
} else {
if (this.selectedData.eccFg == '1') {
this.myBindingData.upEccNm = this.selectedData.eccNm;
this.myBindingData.upEccId = this.selectedData.eccId;
this.$emit('gridEditingFinish', dt);
this.$emit('gridEditingFinish', dt2);
} else {
alert('공정(ECC)을 선택해주세요.');
return false;
}
}
},
dialogOpenCloseEvent(val) {
this.dialog = !val;
},
},
};
var FtnPlcMultiFormPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
content: none !important;
}
.tui-grid-tree-icon {
margin-left: -21px !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>

316
components/common/modal/FtnPlcMultiPop.vue Normal file
View File

@ -0,0 +1,316 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- <v-col :cols="label ? 9 : ''"> -->
<!-- :value="textfield" -->
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
:hide-details="true"
class="v-input__custom"
@click="dialog = !dialog"
outlined
></v-text-field>
</v-col>
<!-- <v-row justify="center"> -->
<v-dialog v-model="dialog" scrollable width="540px">
<!-- <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>
<span class="custom-title-4">{{
this.eqpmYn ? '공정/설비' : '공정'
}}</span>
</v-card-title>
<v-card-actions>
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-col v-if="label" cols="3">
<label for="" class="search-box-label">
위치정보 선택
</label>
</v-col>
<v-col :cols="label ? 6 : ''">
<!-- :value="textfield" -->
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="btnTreeExpand()">{{
treeExpand
}}</v-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<v-btn color="primary" dark>초기화</v-btn>
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</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.selectFtnPlcListTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
:tree-data="ftnPlcListTreeData"
/> -->
</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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
default: '공정/설비',
},
labelCols: {
type: Number,
require: false,
default: 2,
},
textCols: {
type: Number,
require: false,
default: 9,
},
eqpmYn: {
type: Number,
require: false,
default: 1,
},
},
components: {
Grid,
// Tree
},
data() {
return {
// label: "공정/설비",
labelPrepend: true,
myModalKey: 'selectFtnPlcListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
treeExpandAll: true,
activeRowData: {},
// isUpdate: false
// ftnPlcListTreeData: []
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue() {
// 선택된 공장/설비 값
return this.searchParam.facInfo.path;
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
// selectValue: {
// get() {
// return this.searchParam[this.parentPrgmId].facInfo;
// },
// set(value) {
// return this.setPageData({ facInfo: value });
// }
// }
},
watch: {
chkDialog(val) {
if (val) this.getTreeData();
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectFtnPlcListTree },
});
// console.log("2.vue::beforeCreate");
},
created() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
// this.getTreeData();
// this.lineCOption = chartOption;
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const treeGridHeight = 490; // this.$refs.treeGridParent.offsetHeight - 30;
const myOptionsTree = {
treeColumnOptions: {
name: 'name',
},
// bodyHeight: treeGridHeight,
// minBodyHeight: treeGridHeight,
// header: {
// height: 28
// },
// rowHeight: 29,
// minRowHeight: 29
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
// value: myOptionsTree
value: Object.assign(
Utility.defaultGridOption(treeGridHeight),
myOptionsTree,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
value: [{ header: '위치정보', name: 'name' }],
});
},
// 공정/설비 조회
async getTreeData() {
const res = await this.postApiReturn({
apiKey: 'selectFtnPlcListTree',
resKey: 'ftnPlcTreeDatas',
sendParam: {
blocId: this.searchParam.blocMstrList[this.searchParam.blocId].blocId, //"BL0001",
eqpmYn: this.eqpmYn,
mttCd: this.searchParam.energyList[this.searchParam.energyCd].cd,
// eqpmYn: this.searchParam.modalData.selectFtnPlcListTree.eqpmYn // "MTT00001" // 전력 코드 고정
},
});
// console.log('res[getTreeData] :', res);
// this.treeData = res;
// const ROOT = res[0].plcCd;
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'PLC_CD',
value: res.map(item => ({
...item,
plcCdNm: item.plcNm,
})),
});
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
value: setTreeData.ROOT,
});
this.loadGrid = true;
},
// 공정/설비 트리 row 클릭이벤트
async getRowData(data) {
// console.log("getRowData = ", data);
this.activeRowData = data;
},
setUpdate() {
if (this.activeRowData) {
this.dialog = false;
this.setPageData({ facInfo: this.activeRowData });
}
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll)
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
else this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
},
},
};
const selectFtnPlcListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
eqpmYn: 1,
};
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

503
components/common/modal/FtnPlcMultiPop2.vue Normal file
View File

@ -0,0 +1,503 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- <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"
:hide-details="true"
outlined
></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
>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
<v-card :height="height">
<v-card-title class="d-flex align-center justify-space-between">
<span class="custom-title-4">{{
this.eqpmYn ? '공정/설비' : '공정'
}}</span>
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col v-if="label" cols="3">
<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="label ? 6 : ''">
<!-- :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-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-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<!-- <v-btn :ripple="false">초기화</v-btn> -->
<v-btn v-if="searchParam.isMulti" :ripple="false" @click="reset()"
>초기화</v-btn
>
<v-btn
v-if="!searchParam.isMulti"
:ripple="false"
@click="search()"
>검색</v-btn
>
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div :style="{ height: 'calc(100% - 213px)' }">
<div ref="treeGridParent" class="h100 py-3">
<component
:ref="'treeGrid' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree"
:dataPath="searchParam.modalData.selectFtnPlcListTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
:tree-data="ftnPlcListTreeData"
/> -->
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate()">확인</v-btn>
<v-btn :ripple="false" @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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: true,
default: '공정/설비',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
height: {
type: Number,
default: 713,
},
eqpmYn: {
type: Number,
require: false,
default: 1,
},
},
components: {
Grid,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'selectFtnPlcListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
checkedRowDataList: [],
searchWord: '',
// isUpdate: false
// ftnPlcListTreeData: []
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
// 모달 열기/닫기 값
if (this.searchParam.isMulti == false) {
// delete this.$store.state.pageData[this.parentPrgmId]['modalData'][this.myModalKey].treeGrid.option.rowHeaders[0] = {};
this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders = [];
} else {
this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders = [{ type: 'check' }];
}
return this.dialog;
},
selectValue() {
// 선택된 공장/설비 값
const temp = [];
const facData = this.searchParam.isMulti
? this.searchParam.facInfoList
: this.searchParam.facInfo;
if (Array.isArray(facData)) {
if (facData.length > 0) {
for (const item of facData) {
temp.push(item.eccNm);
}
}
} else {
return facData.path === undefined ? facData.eccNm : facData.path;
}
return temp.join();
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getTreeData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectFtnPlcListTree },
});
},
created() {
this.init();
if (this.searchParam.isMulti == true) {
this.setPageData({
facInfoList:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
} else {
this.setPageData({
facInfo:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
}
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const treeGridHeight = 490;
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [{ header: '위치정보', name: 'eccNm' }],
});
},
// 공정/설비 조회
async getTreeData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectFtnPlcListTree',
resKey: 'ftnPlcTreeDatas',
sendParam: {
blocId:
this.searchParam.blocMstrList.length > 0
? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
: this.searchParam.blocId, //"BL0001",
roiId: this.searchParam.energyList[this.searchParam.energyCd].cd, // "MTT00001" // 전력 코드 고정
eqpmYn: this.eqpmYn,
search: this.searchWord,
},
});
let myOptionsTree = {
treeColumnOptions: {
name: 'eccNm',
useIcon: true,
},
scrollX: false,
};
if (this.searchParam.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
myOptionsTree['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
myOptionsTree['treeColumnOptions']['useCascadingCheckbox'] = false;
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(
Utility.defaultGridOption(
this.$refs.treeGridParent.offsetHeight - 60,
),
myOptionsTree,
),
});
// this.treeData = res;
// const ROOT = res[0].plcCd;
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'ECC_ID',
value: res.map(item => ({
...item,
eccNm: item.eccNm,
})),
});
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT || [],
});
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows();
}
});
},
setGridCheckedRows() {
this.checkedRowDataList =
this.searchParam.facInfoList.length > 0
? this.searchParam.facInfoList
: [];
if (this.checkedRowDataList.length > 0) {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
}
},
// 공정/설비 트리 row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
if (this.searchParam.isMulti) {
if (data._attributes.checked) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
} else {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
if (this.searchParam.isMulti) {
this.checkedRowDataList = this.$refs[
'treeGrid' + this.parentPrgmId
].getCheckedRowsEvt();
if (this.checkedRowDataList.length < 20) {
this.dialog = false;
this.setPageData({ facInfoList: this.checkedRowDataList });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.facInfoList),
);
} else {
alert('비교대상이 20개를 초과하였습니다.');
}
} else {
this.dialog = false;
this.setPageData({ facInfo: this.activeRowData });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.facInfo),
);
}
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll)
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
else this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
},
reset() {
for (
var i = 0;
i < this.$refs['treeGrid' + this.parentPrgmId].getData().length;
i++
) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
this.$refs['treeGrid' + this.parentPrgmId].getData()[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
},
search() {
this.getTreeData();
},
typeEnterKey() {
this.getTreeData();
},
},
};
const selectFtnPlcListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
content: none !important;
}
.tui-grid-tree-icon {
margin-left: -21px !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>

507
components/common/modal/FtnPlcMultiPop3.vue Normal file
View File

@ -0,0 +1,507 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- <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"
:hide-details="true"
outlined
></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
>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
<v-card :height="height">
<v-card-title class="d-flex align-center justify-space-between">
<span class="custom-title-4">{{
this.eqpmYn ? '공정/설비' : '공정'
}}</span>
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col v-if="label" cols="3">
<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="label ? 6 : ''">
<!-- :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-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-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<!-- <v-btn :ripple="false">초기화</v-btn> -->
<!-- <v-btn v-if="searchParam.isMulti" :ripple="false" @click="reset()">초기화</v-btn> -->
<v-btn :ripple="false" @click="search()">검색</v-btn>
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div :style="{ height: 'calc(100% - 213px)' }">
<div ref="treeGridParent" class="h100 py-3">
<component
:ref="'treeGrid' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree"
:dataPath="searchParam.modalData.selectFtnPlcListTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
:tree-data="ftnPlcListTreeData"
/> -->
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate()">확인</v-btn>
<v-btn :ripple="false" @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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: true,
default: '공정/설비',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
height: {
type: Number,
default: 713,
},
eqpmYn: {
type: Number,
require: false,
default: 1,
},
apiUrl: {
type: String,
require: false,
default: 'selectFtnPlcListTree',
},
treeFg: {
type: Boolean,
require: false,
default: true,
},
},
components: {
Grid,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'selectFtnPlcListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
checkedRowDataList: [],
searchWord: '',
// isUpdate: false
// ftnPlcListTreeData: []
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
// 모달 열기/닫기 값
if (this.searchParam.isMulti == false) {
// delete this.$store.state.pageData[this.parentPrgmId]['modalData'][this.myModalKey].treeGrid.option.rowHeaders[0] = {};
this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders = [];
} else {
this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders = [{ type: 'check' }];
}
return this.dialog;
},
selectValue() {
// 선택된 공장/설비 값
const temp = [];
const facData = this.searchParam.isMulti
? this.searchParam.facInfoList
: this.searchParam.facInfo;
if (Array.isArray(facData)) {
if (facData.length > 0) {
for (const item of facData) {
temp.push(item.eccNm);
}
}
} else {
return facData.path === undefined ? facData.eccNm : facData.path;
}
return temp.join();
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getTreeData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectFtnPlcListTree },
});
},
created() {
this.init();
// if(this.searchParam.isMulti == true){
// this.setPageData({
// // facInfoList : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }else{
// this.setPageData({
// // facInfo : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const treeGridHeight = 490;
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [{ header: '위치정보', name: 'eccNm' }],
});
},
// 공정/설비 조회
async getTreeData() {
let roiIdVal;
if (this.searchParam.energyCd < 0) {
roiIdVal = null;
} else {
console.log(
'this.searchParam.energyList[this.searchParam.energyCd]',
this.searchParam.energyList[this.searchParam.energyCd],
);
roiIdVal = this.searchParam.energyList[this.searchParam.energyCd + 1]
.cd;
}
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: this.apiUrl,
resKey: 'ftnPlcTreeDatas',
sendParam: {
blocId:
this.searchParam.blocMstrList.length > 0
? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
: this.searchParam.blocId, //"BL0001",
roiId: roiIdVal,
eqpmYn: this.eqpmYn,
search: this.searchWord,
},
});
let myOptionsTree = {
treeColumnOptions: {
name: 'eccNm',
useIcon: true,
},
scrollX: false,
};
if (this.searchParam.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
myOptionsTree['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
myOptionsTree['treeColumnOptions']['useCascadingCheckbox'] = false;
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(
Utility.defaultGridOption(
this.$refs.treeGridParent.offsetHeight - 60,
),
myOptionsTree,
),
});
// this.treeData = res;
// const ROOT = res[0].plcCd;
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'ECC_ID',
value: res.map(item => ({
...item,
eccNm: item.eccNm,
})),
});
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: this.treeFg ? setTreeData.ROOT || [] : res,
});
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows();
}
});
},
setGridCheckedRows() {
this.checkedRowDataList =
this.searchParam.facInfoList.length > 0
? this.searchParam.facInfoList
: [];
if (this.checkedRowDataList.length > 0) {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
}
},
// 공정/설비 트리 row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
if (this.searchParam.isMulti) {
if (data._attributes.checked) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
} else {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
if (this.searchParam.isMulti) {
this.checkedRowDataList = this.$refs[
'treeGrid' + this.parentPrgmId
].getCheckedRowsEvt();
if (this.checkedRowDataList.length < 20) {
this.dialog = false;
this.setPageData({ facInfoList: this.checkedRowDataList });
// localStorage.setItem(this.parentPrgmId + "CheckedRow", JSON.stringify(this.searchParam.facInfoList));
} else {
alert('비교대상이 20개를 초과하였습니다.');
}
} else {
this.dialog = false;
this.setPageData({ facInfo: this.activeRowData });
// localStorage.setItem(this.parentPrgmId + "CheckedRow", JSON.stringify(this.searchParam.facInfo));
}
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll)
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
else this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
},
reset() {
for (
var i = 0;
i < this.$refs['treeGrid' + this.parentPrgmId].getData().length;
i++
) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
this.$refs['treeGrid' + this.parentPrgmId].getData()[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
},
search() {
this.getTreeData();
},
typeEnterKey() {
this.getTreeData();
},
},
};
const selectFtnPlcListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
content: none !important;
}
.tui-grid-tree-icon {
margin-left: -21px !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>

505
components/common/modal/GdIdxPop.vue Normal file
View File

@ -0,0 +1,505 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</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-col>
<v-dialog v-model="dialog" scrollable width="540px">
<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-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="12">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols='2'
:textCols='6'
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비그룹'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
</v-row>
<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>
<div :style="'height: 429px;'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 w100">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.gdIdxModalData.gdIdxPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
<v-btn v-if="item.closeBtnFg || false" :ripple="false" @click="deleteBtnAction($event)">삭제</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '가이드',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '가이드지표 선택',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
}
// bindingFlag:{
// type:Boolean,
// require: false,
// default: false
// }
},
components: {
Grid,
Utility,
SelectBox
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'gdIdxPop',
modalDataKey: 'gdIdxModalData',
searchWord: '',
selectedData: {},
textFieldData: '',
selectValue01:null,
selectValueList01:[],
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
},
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
}
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
async selectValue01(value){
await this.search();
}
},
beforeCreate() {
this.$store.commit('setPageData', {
gdIdxModalData: { gdIdxPop },
});
},
async created() {
await this.setSelectValueList01();
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
async setSelectValueList01(){
// form으로 popup 사용할 때 인자로 eqpmKindId, eqpmGrpId 보내줘야한다.
let res = await this.postApiReturn({
apiKey:'selectEqpmGrpCodeList',
resKey: "eqpmGrpCodeLists",
sendParam:{eqpmKindId: this.item.eqpmKindId != undefined ? this.item.eqpmKindId : this.searchParam.eqpmKindId}
// form을 통해 popup을 사용할 경우 -> this.item.eqpmKindId 사용
// 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
});
if(res.length>0){
this.selectValueList01 = await res.map(obj => {
return {
'text':obj.eqpmGrpNm,
'value':obj.eqpmGrpId
};
});
// form을 통해 popup을 사용할 경우 -> this.item.eqpmGrpId 사용
// 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
this.selectValue01 = this.item.eqpmGrpId != undefined ? this.item.eqpmGrpId : this.searchParam.eqpmGrpId != undefined ? this.searchParam.eqpmGrpId : this.selectValueList01[0].value;
}else{
this.selectValueList01 = [];
this.selectValue01 = null;
}
// console.log('pyscPop_this.searchParam.eqpmGrpId', this.searchParam.eqpmGrpId);
// console.log('pyscPop_this.selectValueList01[0].value', this.selectValueList01[0].value);
// this.selectValueList01 = [{
// 'text' : 'test_eqpm_grp_03',
// 'value' : 'EQG000003'
// },
// {
// 'text' : 'test_eqpm_grp_01',
// 'value' : 'EQG000001'
// },
// {
// 'text' : 'test_eqpm_grp_02',
// 'value' : 'EQG000002'
// },
// {
// 'text' : 'test_eqpm_grp_04',
// 'value' : 'EQG000004'
// },
// {
// 'text' : 'test_eqpm_grp_05',
// 'value' : 'EQG000005'
// }
// ];
// this.selectValue01 = this.selectValueList01[0].value;
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: '설비종류', name: 'eqpmKindId',hidden:true },
{ header: '설비그룹ID', name: 'eqpmGrpId' ,hidden:true},
{ header: '가이드ID', name: 'gdIdxId' },
{ header: '가이드 명', name: 'gdIdxNm', align:'center' },
{ header: '설비그룹ID', name: 'eqpmGrpId' ,hidden:true},
],
});
},
async getGridData() {
this.loadGrid = false;
let res = await this.postApiReturn({
apiKey: 'selectGdIdxPop',
resKey: 'gdIdxData',
sendParam: {
searchWord: this.searchWord,
eqpmGrpId : this.selectValue01,
},
});
//이미 선택된 값들 제거
var newRes = [];
if(res.length>0){
if(this.item.dataList){
newRes = res.filter(item=>{
return !this.item.dataList.includes(item.gdIdxId);
});
}
}
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: newRes,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
this.dialog = false;
let bindingObj = {};
if(this.item.bindingItemList != undefined){
bindingObj = this.item.bindingItemList;
}
if(bindingObj.constructor === Object && Object.keys(bindingObj).length === 0) {
this.textFieldData = this.selectedData.gdIdxNm;
}else{
for (const [parentPageBindingKey, popupBindingKey] of Object.entries(bindingObj)) {
this.myBindingData[parentPageBindingKey] = this.selectedData[popupBindingKey];
const dt = {
columnName: parentPageBindingKey,
value: this.selectedData[popupBindingKey],
};
this.$emit('gridEditingFinish', dt);
this.setPageData({[parentPageBindingKey] : this.selectedData[popupBindingKey]});
}
}
},
async dialogOpenCloseEvent(val) {
await this.setSelectValueList01();
if(!this.myBindingData){
return alert('그리드를 먼저 선택해주세요.');
}
this.dialog = !val;
},
deleteBtnAction(v){
this.dialog = false;
let bindingObj = {};
if(this.item.bindingItemList != undefined){
bindingObj = this.item.bindingItemList;
}
if(bindingObj.constructor === Object && Object.keys(bindingObj).length === 0) {
this.textFieldData = null;
}else{
for (const [parentPageBindingKey, popupBindingKey] of Object.entries(bindingObj)) {
this.myBindingData[parentPageBindingKey] = null;
const dt = {
columnName: parentPageBindingKey,
value: null,
};
this.$emit('gridEditingFinish', dt);
this.setPageData({[parentPageBindingKey] : null});
}
}
}
},
};
var gdIdxPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

176
components/common/modal/GridClickPop.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div>
<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
<v-dialog
v-model="dialog"
width="900"
overlay-color="#000"
overlay-opacity="0.8"
>
<v-card>
<v-toolbar
:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
class="py-4 pr-3 pl-5"
height="auto"
>
<v-toolbar-title>{{ label }}</v-toolbar-title>
<v-btn
icon
tile
small
:ripple="false"
@click="dialog = !dialog"
:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<!-- <template v-for="(item, index) in detailList"> -->
<template>
<div style="padding : 20px">
<div v-for="n in detailList.length" :key="n">
<v-row v-if="n % 2 == 1" align="center" no-gutters>
<!-- {{detailList[n-1]}} {{detailList[n-1].type}} -->
<v-col
:cols="detailList[n - 1].cols"
:class="detailList[n - 1].class"
>
<component
:is="detailList[n - 1].type"
:item="detailList[n - 1]"
:parentPrgmId="parentPrgmId"
:bindingData="bindingData"
/>
</v-col>
<v-col
v-if="detailList[n] != undefined"
:cols="detailList[n].cols"
:class="detailList[n].class"
>
<component
:is="detailList[n].type"
:item="detailList[n]"
:parentPrgmId="parentPrgmId"
:bindingData="bindingData"
/>
</v-col>
</v-row>
</div>
</div>
</template>
<v-card-actions class="justify-end">
<v-btn :ripple="false" @click="clickOk()">확인</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import InputText from '~/components/common/form/InputText';
import InputNumber from '~/components/common/form/InputNumber';
import TextArea from '~/components/common/form/TextArea';
import SelectBox from '~/components/common/form/SelectBox';
import SelectBoxes from '~/components/common/form/SelectBoxes';
import CheckBox from '~/components/common/form/CheckBox';
import ChangeUserPswdPopPage from '~/components/common/modal/ChangeUserPswdPopPage';
import EnrgReadPlacePop2Page from '~/components/common/modal/EnrgReadPlacePop2Page';
import EnrgCostCenterPop from '~/components/common/modal/EnrgCostCenterPop';
import ReadPlcPop from '~/components/common/modal/ReadPlcPop';
import EvtObjPop from '~/components/common/modal/EvtObjPop';
import FtnPlcFormPop from '~/components/common/modal/FtnPlcMultiPop2';
import Label from '~/components/common/form/Label';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
detailList: {
type: Array,
require: false,
default: () => {
return [];
},
},
label: {
type: String,
require: true,
},
bindingData: {
type: String,
require: false,
},
myGrid: {
require: true,
},
},
components: {
InputText,
InputNumber,
TextArea,
SelectBox,
SelectBoxes,
CheckBox,
ChangeUserPswdPopPage,
EnrgReadPlacePop2Page,
EnrgCostCenterPop,
ReadPlcPop,
EvtObjPop,
Label,
FtnPlcFormPop,
},
data() {
return {
dialog: false,
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
},
watch: {
async chkDialog(val) {
if (val) {
}
},
},
methods: {
...mapMutations({
setPageData: 'setPageData',
}),
clickOk() {
if (this.parentPrgmId) {
// this.$emit('yesNo',true);
this.setPageData({ rowGridSelectData: null });
}
this.dialog = !this.dialog;
},
},
};
</script>
<style scoped lang="scss">
::v-deep {
.v-toolbar__content {
justify-content: space-between;
padding: 0;
.v-btn {
margin-right: 0 !important;
}
}
.v-card__actions {
padding-bottom: 30px !important;
}
}
</style>

457
components/common/modal/MainReadReptReadObjMultiPop.vue Normal file
View File

@ -0,0 +1,457 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="600"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ popTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</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 v-if="searchParam.isMulti" :ripple="false" @click="reset()"
>초기화</v-btn
>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div :style="'height: calc(50vh)'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="gridParent" class="h100 py-3">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.readObjModalData.OnInDataReadPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
isMulti: {
type: Boolean,
require: true,
default: false,
},
label: {
type: String,
require: true,
// default: "공정/설비"
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
height: {
type: Number,
default: 713,
},
popTitle: {
type: String,
require: false,
default: '',
},
widgetId: {
type: String,
require: false,
default: '',
},
props: {
dialogView: Boolean,
},
},
components: {
Grid,
Utility,
// Tree
},
data() {
return {
labelPrepend: true,
//parentPrgmId: this.parentPrgmId,
myModalKey: 'OnInDataReadPop',
gridName: 'modalGrid',
loadGrid: false,
dialog: false,
modalDataKey: 'readObjModalData',
activeRowData: {},
checkedRowDataList: [],
searchWord: '',
gridSet: true,
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId][this.widgetId][
this.widgetId + 'Data'
];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
selectValue() {
const temp = [];
const readObjData = this.searchParam.isMulti
? this.searchParam.readObjList
: this.searchParam.readObj;
if (Array.isArray(readObjData)) {
if (readObjData.length > 0) {
for (const item of readObjData) {
temp.push(item.readObjNm);
}
}
} else {
// return readObjData.path === undefined ? readObjData.eccNm : readObjData.path;
}
return temp.join();
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {},
mounted() {},
created() {
this.$store.state.pageData[this.parentPrgmId][this.widgetId][
this.widgetId + 'Data'
].readObjModalData = { OnInDataReadPop: OnInDataReadPop };
if (this.searchParam.isMulti) {
this.$store.state.pageData[this.parentPrgmId][this.widgetId][
this.widgetId + 'Data'
].readObjList =
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {};
} else {
this.$store.state.pageData[this.parentPrgmId][this.widgetId][
this.widgetId + 'Data'
].readObj =
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {};
}
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setWidgetPageData: 'setWidgetPageData',
setWidgetModalGridOption: 'setWidgetModalGridOption',
setWidgetModalGridColumn: 'setWidgetModalGridColumn',
setWidgetModalGridData: 'setWidgetModalGridData',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 그리드 세팅
gridInit() {
// const gridHeight = this.$refs.gridParent.offsetHeight - 36;
if (this.$store.state.activeMenuInfo.prgmId == '0') {
this.$store.state.activeMenuInfo.prgmId = this.$route.query.prgmId;
}
this.setWidgetModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
widgetId: this.widgetId,
modalDataKey: this.modalDataKey,
value: [{ header: '검침 대상 명', name: 'readObjNm' }],
});
},
// 그리드 데이터 설정
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectOnInDataReadPop',
resKey: 'OnInDataReadPopData',
sendParam: {
enrgDiv: this.searchParam.enrgDiv,
search: this.searchWord,
grpCd: this.searchParam.grpCd,
mntrFg: '1',
},
});
let myOptions = {
columOptions: {
resizeable: true,
},
};
if (this.searchParam.isMulti) {
myOptions['rowHeaders'] = [{ type: 'checkbox' }];
myOptions['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
} else {
myOptions['rowHeaders'] = [];
myOptions['rowHeight'] = '';
}
this.setWidgetModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
widgetId: this.widgetId,
modalDataKey: this.modalDataKey,
value: Object.assign(
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setWidgetModalGridData({
modalKey: this.myModalKey,
widgetId: this.widgetId,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
//화면 처음 열때 Default 체크 처리
if (localStorage.getItem(this.parentPrgmId + 'CheckedRow') == null) {
let temp = [];
res.filter(item => {
if (item.mntrFg == 1) {
temp.push(item);
}
});
this.searchParam.readObjList = temp;
}
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows();
}
});
},
setGridCheckedRows() {
this.checkedRowDataList =
this.searchParam.readObjList.length > 0
? this.searchParam.readObjList
: [];
if (this.checkedRowDataList.length > 0) {
if (
this.checkedRowDataList[0].readObjKind != this.searchParam.enrgDiv
) {
this.checkedRowDataList = [];
} else {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs[this.gridName + this.parentPrgmId],
);
}
}
}
},
// row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
if (this.searchParam.isMulti) {
if (data._attributes.checked) {
this.$refs[this.gridName + this.parentPrgmId].uncheckEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
} else {
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
if (this.searchParam.isMulti) {
this.checkedRowDataList = this.$refs[
this.gridName + this.parentPrgmId
].getCheckedRowsEvt();
if (this.checkedRowDataList.length > 4) {
alert('검침대상은 최대 4개까지 선택가능합니다.');
return;
}
this.dialog = false;
this.$store.state.pageData[this.parentPrgmId][this.widgetId][
this.widgetId + 'Data'
].readObjList = this.checkedRowDataList;
this.$emit('chDialogView' + this.widgetId);
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.readObjList),
);
} else {
this.dialog = false;
this.$store.state.pageData[this.parentPrgmId][this.widgetId][
this.widgetId + 'Data'
].readObjList = [this.activeRowData];
this.$emit('chDialogView' + this.widgetId);
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.readObj),
);
}
},
reset() {
for (
var i = 0;
i < this.$refs[this.gridName + this.parentPrgmId].getData().length;
i++
) {
this.$refs[this.gridName + this.parentPrgmId].uncheckEvt(
this.$refs[this.gridName + this.parentPrgmId].getData()[i],
this.$refs[this.gridName + this.parentPrgmId],
);
}
},
search() {
this.getGridData();
},
typeEnterKey() {
this.getGridData();
},
dialogOpenCloseEvent(val) {
this.dialog = !val;
},
},
};
const OnInDataReadPop = {
modalGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
content: none !important;
}
.tui-grid-tree-icon {
margin-left: -21px !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>

420
components/common/modal/OnlnBaseEccPop.vue Normal file
View File

@ -0,0 +1,420 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
{{ labelContent }}
</label>
</v-col>
<v-col :cols="textCols">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="required || false"
:disabled="disabled || false"
></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ modalTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="3">
<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="5">
<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>
<div :style="'height: calc(50vh)'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.modalData.onInBaseEccPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '공정명',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '공정목록',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
required: {
require: false,
default: false,
},
disabled: {
require: false,
default: false,
},
bindOption: {
type: Object,
requrie: false,
default: null,
},
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'onInBaseEccPop',
modalDataKey: 'modalData',
searchWord: '',
selectedData: {},
textFieldData: '',
parentModalState: 'close',
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
},
set(value) {
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
parentModalState(val) {
if (this.bindOption !== null) {
if (val === 'open') {
this.textFieldData = this.searchParam.rowGridSelectData.eccNm;
this.searchParam[
this.bindOption.eccId
] = this.searchParam.rowGridSelectData.eccId;
this.searchParam[
this.bindOption.eccNm
] = this.searchParam.rowGridSelectData.eccNm;
} else if (val === 'openWithInit') {
this.textFieldData = '';
this.searchParam[this.bindOption.eccId] = '';
this.searchParam[this.bindOption.eccNm] = '';
}
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { onInBaseEccPop },
});
},
created() {
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
this.textFieldData = '';
this.selectedData.eccId = '';
this.selectedData.eccNm = '';
if (this.bindOption === null) {
console.log('this.bindOption is null...');
this.setPageData({
modalEccId: '',
modalEccNm: '',
});
} else {
console.log('this.bindOption is not null...');
this.setPageData({
[this.bindOption.eccId]: '',
[this.bindOption.eccNm]: '',
});
}
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
const _this = this;
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: '회사 ID', name: 'comId', hidden: true },
{
header: '공정 ID',
name: 'eccId',
width: 100,
align: 'center',
hidden: true,
},
{ header: '공정명', name: 'eccNm', align: 'center' },
],
});
this.setPageData({
modalEccId:
localStorage.getItem(this.parentPrgmId + 'ModalEccId') != null
? localStorage.getItem(this.parentPrgmId + 'ModalEccId')
: '',
modalEccNm:
localStorage.getItem(this.parentPrgmId + 'ModalEccNm') != null
? localStorage.getItem(this.parentPrgmId + 'ModalEccNm')
: '',
});
console.log(
'localStorage.getItem(this.parentPrgmId + "ModalEccNm") : ',
localStorage.getItem(this.parentPrgmId + 'ModalEccNm') != null
? localStorage.getItem(this.parentPrgmId + 'ModalEccNm')
: '',
);
this.textFieldData =
localStorage.getItem(this.parentPrgmId + 'ModalEccNm') != null
? localStorage.getItem(this.parentPrgmId + 'ModalEccNm')
: '';
},
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectOnlnBaseEcc',
resKey: 'onlnBaseEccData',
sendParam: {
eccNmLike: this.searchWord,
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
this.dialog = false;
this.textFieldData = this.selectedData.eccNm;
if (this.bindOption === null) {
this.searchParam.modalEccId = this.selectedData.eccId;
this.searchParam.modalEccNm = this.selectedData.eccNm;
localStorage.setItem(
this.parentPrgmId + 'ModalEccId',
this.selectedData.eccId != null ? this.selectedData.eccId : '',
);
localStorage.setItem(
this.parentPrgmId + 'ModalEccNm',
this.selectedData.eccNm != null ? this.selectedData.eccNm : '',
);
} else {
this.searchParam[this.bindOption.eccId] = this.selectedData.eccId;
this.searchParam[this.bindOption.eccNm] = this.selectedData.eccNm;
}
this.setPageData({ isFind: true });
},
dialogOpenCloseEvent(val) {
this.dialog = !val;
localStorage.setItem(
this.parentPrgmId + 'ModalEccId',
this.selectedData.eccId != null ? this.selectedData.eccId : '',
);
localStorage.setItem(
this.parentPrgmId + 'ModalEccNm',
this.selectedData.eccNm != null ? this.selectedData.eccNm : '',
);
},
},
};
var onInBaseEccPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

412
components/common/modal/OnlnBasicUnitAddInfoPop.vue Normal file
View File

@ -0,0 +1,412 @@
<template>
<v-row v-if="!item.showValue" class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</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="false"
></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<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-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>
<div :style="'height: calc(50vh)'">
<!-- <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.OnlnBasicUnitAddInfoPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '이벤트항목',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '이벤트항목',
},
modalContent: {
type: String,
require: false,
default: '검색',
},
item: {
type: Object,
require: false,
},
bindingData: {
type: String,
require: false,
},
// bindingFlag:{
// type:Boolean,
// require: false,
// default: false
// }
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
grid_01: 'grid_01',
myModalKey: 'OnlnBasicUnitAddInfoPop',
modalDataKey: 'modalData2',
searchWord: '',
selectedData: {},
textFieldData: '',
option: {
labelCols:
this.item !== undefined
? this.item.labelCols !== undefined
? this.item.labelCols
: this.labelCols
: this.labelCols,
labelContent:
this.item !== undefined
? this.item.labelContent !== undefined
? this.item.labelContent
: this.labelContent
: this.labelContent,
textCols:
this.item !== undefined
? this.item.textCols !== undefined
? this.item.textCols
: this.textCols
: this.textCols,
modalTitle:
this.item !== undefined
? this.item.modalTitle !== undefined
? this.item.modalTitle
: this.modalTitle
: this.modalTitle,
},
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
selectValue: {
get() {
if (!this.item) {
return this.textFieldData;
}
// else if(this.item.disableContent){
// return "NONE";
// }
else {
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
}
},
set(value) {
// if(this.item && this.item.disableContent){
// return "NONE";
// }
return value;
},
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { OnlnBasicUnitAddInfoPop },
});
},
created() {
this.init();
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.gridInit();
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: 'TAG ID', name: 'tagId' },
{ header: 'TAG 명', name: 'tagNm' },
],
});
},
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectTagBaseInfo',
resKey: 'tagBaseInfoData',
sendParam: {
tagNmLike: this.searchWord,
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate(v) {
this.dialog = false;
if (!this.item) {
this.textFieldData = this.selectedData.tagId;
} else {
if (this.item.bindNm) {
this.myBindingData[this.item.bindNm] = this.selectedData.tagNm;
} else {
this.myBindingData.tagNm = this.selectedData.tagNm;
}
// this.myBindingData.tagNm = this.selectedData.tagNm;
const dt = {
columnName: this.item.valueNm,
value: this.selectedData.tagId,
};
// console.log("dt1 : ", dt)
this.$emit('gridEditingFinish', dt);
if (this.item.valueNm2 !== undefined) {
const dt = {
columnName: this.item.valueNm2,
value: this.selectedData[this.item.valueNm2],
};
// console.log("dt2 : ", dt)
this.$emit('gridEditingFinish', dt);
}
if (this.item.bindNm !== undefined) {
const dt = {
columnName: this.item.bindNm,
value: this.selectedData.tagNm,
};
// console.log("dt3 : ", dt)
this.$emit('gridEditingFinish', dt);
}
}
},
dialogOpenCloseEvent(val) {
// if(this.item && this.item.disableContent){
// this.dialog = false;
// return;
// }
this.dialog = !val;
},
},
};
var OnlnBasicUnitAddInfoPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

383
components/common/modal/OutSideWeatherPlcMultiPop.vue Normal file
View File

@ -0,0 +1,383 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- :value="textfield" -->
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialog = !dialog"
:hide-details="true"
outlined
></v-text-field>
</v-col>
<!-- <v-row justify="center"> -->
<v-dialog ref="popModal" v-model="dialog" scrollable width="540px">
<!-- <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>
<span class="search-box-label">검침개소</span>
</v-card-title>
<v-card-actions>
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-col v-if="label" cols="3">
<label for="" class="search-box-label">
위치정보 선택
</label>
</v-col>
<v-col :cols="label ? 6 : ''">
<!-- :value="textfield" -->
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="btnTreeExpand()">{{
treeExpand
}}</v-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<v-btn color="primary" dark>초기화</v-btn>
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</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.selectReadPlcTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
:tree-data="ftnPlcListTreeData"
/> -->
</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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
components: {
Grid,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'selectReadPlcTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
checkedRowDataList: [],
// isUpdate: false
// ftnPlcListTreeData: []
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue() {
// 선택된 공장/설비 값
const temp = [];
const facData = this.searchParam.isMulti
? this.searchParam.facInfoList
: this.searchParam.facInfo;
if (Array.isArray(facData)) {
if (facData.length > 0) {
for (const item of facData) {
temp.push(item.readPlcNm);
}
}
} else {
return facData.path !== '' ? facData.path : facData.readPlcNm;
}
return temp.join();
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
chkDialog(val) {
if (val) {
this.gridInit();
this.getTreeData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectReadPlcTree },
});
// console.log("2.vue::beforeCreate");
},
created() {
this.init();
if (this.searchParam.isMulti == true) {
this.setPageData({
facInfoList:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
} else {
this.setPageData({
facInfo:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
}
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const treeGridHeight = 490; // this.$refs.treeGridParent.offsetHeight - 30;
const myOptionsTree = {
treeColumnOptions: {
name: 'readPlcNm',
//useCascadingCheckbox: false
},
};
if (this.searchParam.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
myOptionsTree['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
myOptionsTree['treeColumnOptions']['useCascadingCheckbox'] = false;
} else {
delete this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders;
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(
Utility.defaultGridOption(treeGridHeight),
myOptionsTree,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
modalDataKey: this.modalDataKey,
gridKey: this.gridNameTree,
value: [{ header: '위치정보', name: 'readPlcNm' }],
});
},
// 공정/설비 조회
async getTreeData() {
const res = await this.postApiReturn({
apiKey: 'selectReadPlcTree',
resKey: 'ftnPlcTreeData',
sendParam: {
blocId: this.searchParam.blocMstrList[this.searchParam.blocId].blocId, //"BL0001",
mttCd: this.searchParam.energyList[this.searchParam.energyCd].cd, // "MTT00001" // 전력 코드 고정
},
});
// this.treeData = res;
// const ROOT = res[0].plcCd;
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'READ_PLC',
value: res.map(item => ({
...item,
readPlcNm: item.readPlcNm,
})),
});
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT,
});
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows();
}
});
},
async setGridCheckedRows() {
this.checkedRowDataList =
this.searchParam.facInfoList.length > 0
? this.searchParam.facInfoList
: [];
if (this.checkedRowDataList.length > 0) {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
}
},
// 공정/설비 트리 row 클릭이벤트
async getRowData(data) {
//this.activeRowData = data;
if (this.searchParam.isMulti) {
if (data._attributes.checked) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
} else {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
if (this.searchParam.isMulti) {
this.checkedRowDataList = this.$refs[
'treeGrid' + this.parentPrgmId
].getCheckedRowsEvt();
if (this.checkedRowDataList.length < 20) {
this.dialog = false;
this.setPageData({ facInfoList: this.checkedRowDataList });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.facInfoList),
);
} else {
alert('비교대상이 20개를 초과하였습니다.');
}
} else {
this.dialog = false;
this.setPageData({ facInfo: this.activeRowData });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.facInfo),
);
}
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll)
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
else this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
},
},
};
const selectReadPlcTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

467
components/common/modal/PastRsltDataReadPop.vue Normal file
View File

@ -0,0 +1,467 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- <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"
:hide-details="true"
outlined
></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
>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
<v-card :height="height">
<v-card-title class="d-flex align-center justify-space-between">
<span class="custom-title-4">검침개소</span>
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col v-if="label" cols="3">
<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="label ? 6 : ''">
<!-- :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-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-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<!-- <v-btn :ripple="false">초기화</v-btn> -->
<v-btn
v-if="!searchParam.isMulti"
:ripple="false"
@click="search()"
>검색</v-btn
>
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div :style="{ height: 'calc(100% - 213px)' }">
<div ref="treeGridParent" class="h100 py-3">
<component
:ref="'treeGrid' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree"
:dataPath="searchParam.modalData.selectReadObjListTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
:tree-data="ftnPlcListTreeData"
/> -->
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setClean()">초기화</v-btn>
<v-btn :ripple="false" @click="setUpdate()">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: true,
default: '공정/설비',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
height: {
type: Number,
default: 713,
},
eqpmYn: {
type: Number,
require: false,
default: 1,
},
},
components: {
Grid,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'selectReadObjListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
checkedRowDataList: [],
searchWord: '',
// isUpdate: false
// ftnPlcListTreeData: []
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue() {
const readPlcData = this.searchParam.readPlcId;
return readPlcData.path === undefined
? readPlcData.readPlcNm
: readPlcData.path;
// 선택된 공장/설비 값
// const temp = []
// const facData = this.searchParam.facInfo;
// if(Array.isArray(facData)){
// if(facData.length > 0){
// for(const item of facData) {
// temp.push(item.eccNm);
// }
// }
// } else {
// return facData.path === undefined ? facData.eccNm : facData.path;
// }
// return temp.join();
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getTreeData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectReadObjListTree },
});
},
created() {
this.init();
this.setPageData({
readPlcId:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: '',
});
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const treeColumnWidth = this.$refs['treeGridParent'] - 10;
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [
{
header: '검침개소명',
name: 'readPlcNm',
width: treeColumnWidth,
align: 'left',
},
],
});
},
// 공정/설비 조회
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",
// roiId: this.searchParam.energyList[this.searchParam.energyCd].cd, // "MTT00001" // 전력 코드 고정
// eqpmYn: this.eqpmYn,
readObjId: this.searchParam.searchReadObj, // "MTT00001" // 전력 코드 고정,
useFg: '1',
search: this.searchWord,
},
});
let myOptionsTree = {
treeColumnOptions: {
name: 'readPlcNm',
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(
Utility.defaultGridOption(
this.$refs.treeGridParent.offsetHeight - 60,
),
myOptionsTree,
),
});
// 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,
})),
});
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT,
});
// console.log('this.$refs["treeGrid" + this.parentPrgmId]', this.$refs)
this.loadGrid = true;
// this.$nextTick(() => {
// if (setTreeData.ROOT.length > 0) {
// try {
// this.$refs["treeGrid" + this.parentPrgmId].focus({
// rowKey: 0,
// columnName: "readPlcNm",
// setScroll: true
// });
// } catch (error) {
// }
// }
// });
},
// 공정/설비 트리 row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
this.activeRowData = data;
},
setUpdate() {
this.dialog = false;
this.setPageData({ readPlcId: this.activeRowData });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.readPlcId),
);
this.searchWord = '';
},
setClean() {
// this.$refs["treeGrid" + this.parentPrgmId].focus({
// rowKey: 0,
// columnName: "readPlcNm",
// setScroll: true
// });
// this.dialog = false;
// this.setPageData({readPlcId : {'readPlcId' : ''}});
this.activeRowData = {};
localStorage.removeItem(this.parentPrgmId + 'CheckedRow');
this.searchWord = '';
},
dialogOpenCloseEvent(val) {
this.searchWord = '';
this.dialog = !val;
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll)
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
else this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
},
search() {
this.getTreeData();
},
typeEnterKey() {
this.getTreeData();
},
},
};
const selectReadObjListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
content: none !important;
}
.tui-grid-tree-icon {
margin-left: -21px !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>

356
components/common/modal/PastRsltDataReadTagPop.vue Normal file
View File

@ -0,0 +1,356 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="label ? textCols : ''">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ modalTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</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>
<div :style="'height: calc(50vh)'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData2.selectTagPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
@watchReadPlcPop="watchReadPlcPop"
/>
</div>
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate()">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
labelContent: {
type: String,
require: false,
default: '태그',
},
textCols: {
type: Number,
require: false,
default: 7,
},
modalTitle: {
type: String,
require: false,
default: '태그명',
},
modalContent: {
type: String,
require: false,
default: '태그명 검색',
},
},
components: {
Grid,
Utility,
},
data() {
return {
dialog: false,
loadGrid: false,
gridName: 'grid_01',
myModalKey: 'selectTagPop',
modalDataKey: 'modalData2',
searchWord: '',
selectedData: {},
textFieldData: '',
searchedData: [],
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue() {
const tagData = this.searchParam.tagData;
return tagData.tagNm;
},
chkReadPlc() {
return this.searchParam.readPlcId;
},
},
watch: {
async dialog(val) {
if (val) {
await this.getGridData();
}
},
chkReadPlc() {
// console.log(this.searchParam.readPlcId);
if (!this.dialog) {
this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { selectTagPop },
});
},
created() {
this.init();
this.setPageData({
tagId:
localStorage.getItem(this.parentPrgmId + 'CheckedRow2') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow2'))
: {},
});
},
mounted() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
watchReadPlcPop() {
if (!this.dialog) {
this.getGridData();
}
},
search() {
this.getGridData();
},
initSearch() {
this.searchWord = '';
this.getGridData();
},
gridInit() {
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: [
// { header: "TAG ID", name: "tagId" },
{ header: 'TAG 명', name: 'tagNm' },
],
});
this.getGridData();
},
async getGridData() {
this.loadGrid = false;
let searchparams = {
readPlc: '',
};
searchparams['readPlc'] =
this.searchParam.readPlcId.readPlcId == undefined
? ''
: this.searchParam.readPlcId.readPlcId;
searchparams['searchWord'] = this.searchWord;
const res = await this.postApiReturn({
apiKey: 'selectTagNmList',
resKey: 'tagNmListData',
sendParam: searchparams,
});
this.searchedData = res;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
if (res.length > 0 && !this.dialog) {
this.setPageData({ tagData: res[0] });
} else if (res.length == 0 && !this.dialog) {
this.setPageData({ tagData: { tagId: 'noSearchTagId' } });
}
this.$nextTick(() => {
if (res.length > 0) {
try {
this.$refs['grid_01' + this.parentPrgmId].focus({
rowKey: 0,
columnName: 'tagNm',
setScroll: true,
});
} catch (error) {}
}
});
},
getRowData(data) {
this.selectedData = { ...data };
},
setUpdate() {
this.dialog = false;
this.setPageData({ tagData: this.selectedData });
},
dialogOpenCloseEvent(val) {
this.searchWord = '';
this.dialog = !val;
},
},
};
var selectTagPop = {
grid_01: {
data: [],
column: [],
option: {},
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

885
components/common/modal/PlanPop.vue Normal file
View File

@ -0,0 +1,885 @@
<template>
<div>
<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
<v-dialog
v-model="dialog"
width="700"
overlay-color="#000"
overlay-opacity="0.8"
>
<v-card>
<v-toolbar
:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
class="py-4 pr-3 pl-5"
height="auto"
>
<v-toolbar-title>{{ label }}</v-toolbar-title>
<!-- <v-btn
icon
tile
small
:ripple="false"
@click="dialog = !dialog"
:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
>
<v-icon>mdi-close</v-icon>
</v-btn> -->
</v-toolbar>
<!-- <v-card-title>
일정 상세 내용
</v-card-title> -->
<!-- <template v-for="(item, index) in detailList"> -->
<template>
<div style="padding : 20px">
<v-col :cols="12">
<v-row>
<v-col :cols="3">
<v-row class="search-box" align="center" no-gutters>
<label class="search-box-label">
<v-icon x-small color="#fb8200" class="mr-1"
>mdi-record-circle</v-icon
>
일정 시작
</label>
</v-row>
</v-col>
<v-col :cols="4">
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
<div class="startpicker-container2">
<v-text-field
id="startpicker2"
ref="startpicker2"
v-model="strtDt"
:class="'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div
ref="startpicker-container2"
id="startpicker-container2"
></div>
</template>
</v-text-field>
</div>
</v-col>
<v-col :cols="2">
<vue-numeric-input
v-model="strtHh"
:min="0"
:max="23"
controls-type="updown"
class="v-input__slot"
width="100%"
align="center"
>
</vue-numeric-input>
</v-col>
<v-col :cols="1" style="text-align: center;">
:
</v-col>
<v-col :cols="2">
<vue-numeric-input
v-model="strtMm"
:min="0"
:max="59"
controls-type="updown"
class="v-input__slot"
width="100%"
align="center"
>
</vue-numeric-input>
</v-col>
</v-row>
<v-row>
<v-col :cols="3">
<v-row class="search-box" align="center" no-gutters>
<label class="search-box-label">
<v-icon x-small color="#fb8200" class="mr-1"
>mdi-record-circle</v-icon
>
일정 종료
</label>
</v-row>
</v-col>
<v-col :cols="4">
<!-- <DatePicker v-model="endDt" :parentPrgmId="parentPrgmId"/> -->
<div class="startpicker-container3">
<v-text-field
id="startpicker3"
ref="startpicker3"
v-model="endDt"
:class="'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div
ref="startpicker-container3"
id="startpicker-container3"
></div>
</template>
</v-text-field>
</div>
</v-col>
<v-col :cols="2">
<vue-numeric-input
v-model="endHh"
:min="0"
:max="23"
controls-type="updown"
class="v-input__slot"
width="100%"
align="center"
>
</vue-numeric-input>
</v-col>
<v-col :cols="1" style="text-align: center;">
:
</v-col>
<v-col :cols="2">
<vue-numeric-input
v-model="endMm"
:min="0"
:max="59"
controls-type="updown"
class="v-input__slot"
width="100%"
align="center"
>
</vue-numeric-input>
</v-col>
</v-row>
<v-row>
<v-col :cols="3">
<v-row class="search-box" align="center" no-gutters>
<label class="search-box-label">
<v-icon x-small color="#fb8200" class="mr-1"
>mdi-record-circle</v-icon
>
일정 제목
</label>
</v-row>
</v-col>
<v-col :cols="9">
<v-text-field
v-model="planTitle"
class="v-input__custom"
outlined
:hide-details="true"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col :cols="3">
<v-row class="search-box" align="center" no-gutters>
<label class="search-box-label">
<v-icon x-small color="#fb8200" class="mr-1"
>mdi-record-circle</v-icon
>
일정 상세 내용
</label>
</v-row>
</v-col>
<v-col :cols="9">
<v-textarea
v-model="planCntn"
class="v-input__custom"
outlined
:hide-details="true"
:maxlength="1000"
></v-textarea>
</v-col>
</v-row>
<v-row>
<v-col :cols="3">
<v-row class="search-box" align="center" no-gutters>
<v-icon x-small color="#fb8200" class="mr-1"
>mdi-record-circle</v-icon
>
표시 색상
</v-row>
</v-col>
<v-col :cols="1">
<div
id="redDiv"
class="colPk redBg"
@click="colorClick('red')"
></div>
</v-col>
<v-col :cols="1">
<div
id="blueDiv"
class="colPk blueBg"
@click="colorClick('blue')"
></div>
</v-col>
<v-col :cols="1">
<div
id="pupleDiv"
class="colPk pupleBg"
@click="colorClick('puple')"
></div>
</v-col>
<v-col :cols="1">
<div
id="greenDiv"
class="colPk greenBg"
@click="colorClick('green')"
></div>
</v-col>
<v-col :cols="1">
<div
id="orangeDiv"
class="colPk orangeBg"
@click="colorClick('orange')"
></div>
</v-col>
<v-col :cols="1">
<div
id="pinkDiv"
class="colPk pinkBg"
@click="colorClick('pink')"
></div>
</v-col>
</v-row>
</v-col>
</div>
</template>
<v-card-actions class="justify-end">
<v-btn :ripple="false" @click="btnAction('save')">저장</v-btn>
<v-btn
v-show="popUpAction === 'update'"
:ripple="false"
@click="btnAction('delete')"
>삭제</v-btn
>
<v-btn :ripple="false" @click="btnAction('close')">닫기</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import VueNumericInput from 'vue-numeric-input';
import InputText from '~/components/common/form/InputText';
import InputNumber from '~/components/common/form/InputNumber';
import TextArea from '~/components/common/form/TextArea';
import SelectBox from '~/components/common/form/SelectBox';
import SelectBoxes from '~/components/common/form/SelectBoxes';
import CheckBox from '~/components/common/form/CheckBox';
import Label from '~/components/common/form/Label';
import DatePicker from '~/components/common/Datepicker';
import mixinGlobal from '@/mixin/global.js';
import Utility from '~/plugins/utility';
import TuiDatepicker from 'tui-date-picker';
export default {
mixins: [mixinGlobal],
props: {
parentPrgmId: {
type: String,
require: true,
},
detailList: {
type: Array,
require: false,
default: () => {
return [];
},
},
label: {
type: String,
require: true,
},
bindingData: {
type: String,
require: false,
},
gridName: {
type: String,
require: false,
},
},
components: {
InputText,
InputNumber,
TextArea,
SelectBox,
SelectBoxes,
CheckBox,
Label,
DatePicker,
Utility,
TuiDatepicker,
VueNumericInput,
},
data() {
return {
dialog: false,
popUpAction: '',
param: {},
planCntn: '',
planTitle: '',
strtHh: 0,
strtMm: 0,
endHh: 1,
endMm: 0,
strtDt:null,
endDt:null,
// strtDt: new Date().toISOString().substr(0, 10),
// endDt: new Date().toISOString().substr(0, 10),
planColor: '',
startDatepickerInstance: null,
startDatepickerInstance3: null,
planSeq: '',
blocId: '',
addPlanData:{
}
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
},
watch: {
async chkDialog(val) {
if (val) {
this.openDialog();
this.$nextTick(() => {});
} else {
}
},
strtDt(val){
console.log('strtDt : ', val);
this.checkStrtAndEndDateTime('start');
if(this.startDatepickerInstance3){
this.startDatepickerInstance3.setDate(new Date(this.endDt));
}
},
endDt(val){
console.log('endDt : ', val);
this.checkStrtAndEndDateTime('end');
if(this.startDatepickerInstance){
this.startDatepickerInstance.setDate(new Date(this.strtDt));
}
},
strtHh(val) {
console.log('strtHh : ', val);
this.checkStrtAndEndDateTime('start');
},
endHh(val) {
console.log('endHh : ', val);
this.checkStrtAndEndDateTime('end');
},
strtMm(val) {
this.checkStrtAndEndDateTime('start');
},
endMm(val) {
this.checkStrtAndEndDateTime('end');
},
},
methods: {
...mapMutations({
setPageData: 'setPageData',
}),
...mapActions({
postUpdateApi: 'modules/list/postUpdateApi',
getDomain: 'modules/list/getDomain',
}),
async checkStrtAndEndDateTime(startEndFlag){
var startDateTime = this.strtDt + ' ' + this.strtHh + ':' + this.strtMm;
var endDateTime = this.endDt + ' ' + this.endHh + ':' + this.endMm;
startDateTime = new Date(startDateTime);
endDateTime = new Date(endDateTime);
if(startDateTime > endDateTime){
if(startEndFlag == 'start'){ // 시작 부분이 변경됨 -> 끝 부분 값을 변경
this.endDt = this.convertDateToString(new Date(new Date().setDate(new Date(this.strtDt).getDate() + 1)));
this.startDatepickerInstance3.setDate(new Date(this.endDt));
}else if(startEndFlag == 'end'){ // 끝 부분이 변경됨 -> 시작 부분 값을 변경
this.strtDt = this.convertDateToString(new Date(new Date().setDate(new Date(this.endDt).getDate() - 1)));
this.startDatepickerInstance.setDate(new Date(this.strtDt));
}
}
},
async tuiCalendarInit() {
const startContainer = document.getElementById('startpicker-container2');
const startTarget = document.getElementById('startpicker2');
const startContainer3 = document.getElementById('startpicker-container3');
const startTarget3 = document.getElementById('startpicker3');
var dt1 = new Date();
var dt2 = new Date();
if(this.strtDt){
dt1 = this.strtDt;
}
if(this.endDt){
dt2 = this.endDt;
}
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
// date: new Date(),
date : dt1,
language: 'ko',
type: 'date',
input: {
element: startTarget,
format: 'YYYY-MM-DD',
},
timePicker: false,
});
this.startDatepickerInstance.on('change', () => this.getStartDt());
this.startDatepickerInstance3 = new TuiDatepicker(startContainer3, {
// date: new Date(),
date : dt2,
language: 'ko',
type: 'date',
input: {
element: startTarget3,
format: 'YYYY-MM-DD',
},
timePicker: false,
});
this.startDatepickerInstance3.on('change', () => this.getEndDt());
},
getStartDt() {
const dt = this.startDatepickerInstance.getDate();
// console.log('dt[getStartDt] : ', dt);
// console.log('dt[getStartDt] : ', dt.toISOString());
// this.strtDt = dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
// this.strtDt = String(dt.toISOString()).substr(0, 10);
// this.strtDt = this.convertStringToDateFormat(this.strtDt);
this.strtDt = this.convertDateToString(dt);
this.startDatepickerInstance.setDate(new Date(this.strtDt));
},
getEndDt() {
const dt = this.startDatepickerInstance3.getDate();
// console.log('dt[getEndDt] : ', dt);
// console.log('dt[getendDt] : ', dt.toISOString());
// this.endDt = dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
// this.endDt = String(dt.toISOString()).substr(0, 10);
// this.endDt = this.convertStringToDateFormat(this.endDt);
this.endDt = this.convertDateToString(dt);
this.startDatepickerInstance3.setDate(new Date(this.endDt));
},
convertDateToString(dt){
return dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
},
convertStringToDateFormat(val) {
var result = '';
result = Utility.setFormatDate(val, 'YYYY-MM-DD');
return result;
},
convertDateFormatToString(val) {
return val.replaceAll('-', '');
},
async openDialog() {
this.$nextTick(() => {
this.tuiCalendarInit();
switch (this.popUpAction) {
case 'read':
this.strtDt = this.convertStringToDateFormat(
this.searchParam.rowGridSelectData.chkDd,
);
this.endDt = this.convertStringToDateFormat(
this.searchParam.rowGridSelectData.chkDd,
);
break;
case 'insert':
this.insertPlanData();
break;
case 'update':
this.getPlanData();
break;
}
});
},
async insertPlanData(){
var year = this.addPlanData.year;
var month = this.addPlanData.month;
var day = this.addPlanData.day;
// this.strtDt = this.convertStringToDateFormat(this.strtDt);
// this.endDt = this.convertStringToDateFormat(this.endDt);
this.strtHh = 0;
this.strtMm = 0;
this.endHh = 1;
this.endMm = 0;
this.planTitle = '';
this.planCntn = '';
this.planColor = '';
document.getElementById('redDiv').classList.remove('colPkSelect');
document.getElementById('blueDiv').classList.remove('colPkSelect');
document.getElementById('pupleDiv').classList.remove('colPkSelect');
document.getElementById('greenDiv').classList.remove('colPkSelect');
document
.getElementById('orangeDiv')
.classList.remove('colPkSelect');
document.getElementById('pinkDiv').classList.remove('colPkSelect');
// this.strtDt = this.convertStringToDateFormat(this.strtDt);
// this.endDt = this.convertStringToDateFormat(this.endDt);
// console.log('this.strtDt[insertPlanData] : ', this.strtDt);
// console.log('this.endDt[insertPlanData] : ', this.endDt);
// this.startDatepickerInstance.setDate(new Date(this.strtDt));
// this.startDatepickerInstance3.setDate(new Date(this.endDt));
// this.startDatepickerInstance.setDate(new Date(this.strtDt));
// this.startDatepickerInstance3.setDate(new Date(this.endDt));
// this.strtDt = Utility.setFormatDate(this.strtDt, 'YYYY-MM-DD');
// this.endDt = Utility.setFormatDate(this.endDt, 'YYYY-MM-DD');
this.strtDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
this.endDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
},
async getPlanData() {
let res = await this.postApiReturn({
apiKey: 'selectWorkCaldDetlOne',
resKey: 'workcaldDetlOneData',
sendParam: {
blocId: this.blocId,
planSeq: this.planSeq,
comId: this.comId,
},
});
let returnData = res[0];
this.strtDt = Utility.setFormatDate(returnData.strtDt, 'YYYY-MM-DD');
this.endDt = Utility.setFormatDate(returnData.endDt, 'YYYY-MM-DD');
this.strtHh = returnData.strtHh;
this.strtMm = returnData.strtMm;
this.endHh = returnData.endHh;
this.endMm = returnData.endMm;
this.planTitle = returnData.planTitle;
this.planCntn = returnData.planCntn;
this.planColor = returnData.planColor;
this.colorClick(this.planColor);
},
async btnAction(action) {
switch (action) {
case 'close':
this.dialog = !this.dialog;
break;
case 'save':
if (this.popUpAction === 'insert') {
if (
this.strtDt === '' ||
this.endDt === '' ||
this.strtHh === '' ||
this.strtMm === '' ||
this.endHh === '' ||
this.endMm === '' ||
this.planTitle === '' ||
this.planCntn === '' ||
this.planColor === ''
) {
alert('필수값을 입력해주세요.');
} else {
this.dialog = !this.dialog;
await this.insertDetail();
}
} else if (this.popUpAction === 'update') {
if (
this.strtDt == '' ||
this.endDt == '' ||
this.strtHh == '' ||
this.strtMm == '' ||
this.endHh == '' ||
this.endMm == '' ||
this.planTitle == '' ||
this.planCntn == '' ||
this.planColor == ''
) {
alert('필수값을 입력해주세요.');
} else {
this.dialog = !this.dialog;
await this.updateDetail();
}
}
break;
case 'delete':
this.dialog = !this.dialog;
await this.deleteDetail();
break;
}
//console.log(this);
},
async insertDetail() {
var params = {
strtDt: this.strtDt,
endDt: this.endDt,
strtHh: this.strtHh.toString(),
strtMm: this.strtMm.toString(),
endHh: this.endHh.toString(),
endMm: this.endMm.toString(),
blocId: this.blocId,
planTitle: this.planTitle,
planCntn: this.planCntn,
planColor: this.planColor,
};
await this.postUpdateApi({
apiKey: 'savePlanDetl',
sendParam: {
datas: {
savePlanDetl: [params],
},
params: {},
},
});
this.setPageData({
isFind: true,
});
},
async updateDetail() {
var params = {
strtDt: this.strtDt.substr(0, 10),
endDt: this.endDt.substr(0, 10),
strtHh: this.strtHh.toString(),
strtMm: this.strtMm.toString(),
endHh: this.endHh.toString(),
endMm: this.endMm.toString(),
planTitle: this.planTitle,
planCntn: this.planCntn,
planColor: this.planColor,
blocId: this.blocId,
planSeq: this.planSeq,
};
await this.postUpdateApi({
apiKey: 'updatePlanDetl',
sendParam: {
datas: {
updatePlanDetl: [params],
},
params: {},
},
});
this.setPageData({
isFind: true,
});
},
async deleteDetail() {
var params = {
blocId: this.blocId,
planSeq: this.planSeq,
};
await this.postUpdateApi({
apiKey: 'deletePlanDetl',
sendParam: {
datas: {
deletePlanDetl: [params],
},
params: {},
},
});
this.setPageData({
isFind: true,
});
},
colorClick(t) {
if (t == 'red') {
document.getElementById('redDiv').classList.add('colPkSelect');
document.getElementById('blueDiv').classList.remove('colPkSelect');
document.getElementById('pupleDiv').classList.remove('colPkSelect');
document.getElementById('greenDiv').classList.remove('colPkSelect');
document.getElementById('orangeDiv').classList.remove('colPkSelect');
document.getElementById('pinkDiv').classList.remove('colPkSelect');
this.planColor = 'red';
} else if (t == 'blue') {
document.getElementById('redDiv').classList.remove('colPkSelect');
document.getElementById('blueDiv').classList.add('colPkSelect');
document.getElementById('pupleDiv').classList.remove('colPkSelect');
document.getElementById('greenDiv').classList.remove('colPkSelect');
document.getElementById('orangeDiv').classList.remove('colPkSelect');
document.getElementById('pinkDiv').classList.remove('colPkSelect');
this.planColor = 'blue';
} else if (t == 'puple') {
document.getElementById('redDiv').classList.remove('colPkSelect');
document.getElementById('blueDiv').classList.remove('colPkSelect');
document.getElementById('pupleDiv').classList.add('colPkSelect');
document.getElementById('greenDiv').classList.remove('colPkSelect');
document.getElementById('orangeDiv').classList.remove('colPkSelect');
document.getElementById('pinkDiv').classList.remove('colPkSelect');
this.planColor = 'puple';
} else if (t == 'green') {
document.getElementById('redDiv').classList.remove('colPkSelect');
document.getElementById('blueDiv').classList.remove('colPkSelect');
document.getElementById('pupleDiv').classList.remove('colPkSelect');
document.getElementById('greenDiv').classList.add('colPkSelect');
document.getElementById('orangeDiv').classList.remove('colPkSelect');
document.getElementById('pinkDiv').classList.remove('colPkSelect');
this.planColor = 'green';
} else if (t == 'orange') {
document.getElementById('redDiv').classList.remove('colPkSelect');
document.getElementById('blueDiv').classList.remove('colPkSelect');
document.getElementById('pupleDiv').classList.remove('colPkSelect');
document.getElementById('greenDiv').classList.remove('colPkSelect');
document.getElementById('orangeDiv').classList.add('colPkSelect');
document.getElementById('pinkDiv').classList.remove('colPkSelect');
this.planColor = 'orange';
} else if (t == 'pink') {
document.getElementById('redDiv').classList.remove('colPkSelect');
document.getElementById('blueDiv').classList.remove('colPkSelect');
document.getElementById('pupleDiv').classList.remove('colPkSelect');
document.getElementById('greenDiv').classList.remove('colPkSelect');
document.getElementById('orangeDiv').classList.remove('colPkSelect');
document.getElementById('pinkDiv').classList.add('colPkSelect');
this.planColor = 'pink';
}
},
},
};
</script>
<style scoped lang="scss">
::v-deep {
.v-toolbar__content {
justify-content: space-between;
padding: 0;
.v-btn {
margin-right: 0 !important;
}
}
.v-card__actions {
padding-bottom: 30px !important;
}
.colPk {
width: 25px;
height: 25px;
text-align: center;
border-radius: 5px 5px;
cursor: pointer;
}
.colPkSelect {
border: 2px solid;
}
.redBg {
background-color: rgba(229, 62, 62, var(--bg-opacity));
background-color: #e53e3e;
}
.blueBg {
background-color: rgba(66, 153, 225, var(--bg-opacity));
background-color: #4299e1;
}
.pupleBg {
background-color: rgba(102, 126, 234, var(--bg-opacity));
background-color: #667eea;
}
.greenBg {
background-color: rgba(56, 178, 172, var(--bg-opacity));
background-color: #38b2ac;
}
.orangeBg {
background-color: rgba(237, 137, 54, var(--bg-opacity));
background-color: #ed8936;
}
.pinkBg {
background-color: rgba(237, 100, 166, var(--bg-opacity));
background-color: #ed64a6;
}
}
.startpicker-container2 {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#startpicker-container2,
#endpicker-container2 {
width: 100%;
position: absolute;
top: 36px;
left: 0;
}
}
}
}
.startpicker-container3 {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.v-input {
.v-input__append-outer {
margin-top: 0;
margin-left: 0;
#startpicker-container3,
#endpicker-container3 {
width: 100%;
position: absolute;
top: 36px;
left: 0;
}
}
}
}
.v-input__custom {
flex: 0 0 auto;
&.half {
width: calc(50% - 20px);
}
}
::v-deep {
.tui-timepicker-row {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}
}
}
</style>

440
components/common/modal/ReadObjMultiPop.vue Normal file
View File

@ -0,0 +1,440 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col :cols="label ? textCols : ''">
<!-- <v-col :cols="label ? 9 : ''"> -->
<!-- :value="textfield" -->
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
placeholder="조회항목선택"
@click="dialog = !dialog"
:hide-details="true"
outlined
></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-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ popTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</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 v-if="searchParam.isMulti" :ripple="false" @click="reset()"
>초기화</v-btn
>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div :style="'height: calc(50vh)'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="gridParent" class="h100 py-3">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData.OnInDataReadPop"
: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($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
</v-card-actions>
</v-card>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: true,
// default: "공정/설비"
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 8,
},
height: {
type: Number,
default: 713,
},
eqpmYn: {
type: Number,
require: false,
default: 1,
},
popTitle: {
type: String,
require: false,
default: '',
},
},
components: {
Grid,
Utility,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'OnInDataReadPop',
gridName: 'modalGrid',
loadGrid: false,
dialog: false,
modalDataKey: 'modalData',
activeRowData: {},
checkedRowDataList: [],
searchWord: '',
gridSet: true,
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: 'isDarkMode',
}),
chkDialog() {
return this.dialog;
},
selectValue() {
const temp = [];
const readObjData = this.searchParam.isMulti
? this.searchParam.readObjList
: this.searchParam.readObj;
if (Array.isArray(readObjData)) {
if (readObjData.length > 0) {
for (const item of readObjData) {
temp.push(item.readObjNm);
}
}
} else {
// return readObjData.path === undefined ? readObjData.eccNm : readObjData.path;
}
return temp.join();
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getGridData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { OnInDataReadPop },
});
},
created() {
this.init();
if (this.searchParam.isMulti == true) {
this.setPageData({
readObjList:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
} else {
this.setPageData({
readObj:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
}
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 그리드 세팅
gridInit() {
// const gridHeight = this.$refs.gridParent.offsetHeight - 36;
const myOptions = {
columOptions: {
resizeable: true,
},
};
if (this.searchParam.isMulti) {
myOptions['rowHeaders'] = [{ type: 'checkbox' }];
myOptions['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(
Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: [{ header: '검침 대상 명', name: 'readObjNm' }],
});
},
// 그리드 데이터 설정
async getGridData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectOnInDataReadPop',
resKey: 'OnInDataReadPopData',
sendParam: {
enrgDiv: this.searchParam.enrgDiv,
search: this.searchWord,
},
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
//화면 처음 열때 Default 체크 처리
if (localStorage.getItem(this.parentPrgmId + 'CheckedRow') == null) {
let temp = [];
res.filter(item => {
if (item.mntrFg == 1) {
temp.push(item);
}
});
this.searchParam.readObjList = temp;
}
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows(res);
}
});
},
setGridCheckedRows(res) {
this.checkedRowDataList =
this.searchParam.readObjList.length > 0
? this.searchParam.readObjList
: [];
if (this.checkedRowDataList.length > 0) {
if (res.length > 0) {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
if (res[i].readObjNm == this.checkedRowDataList[i].readObjNm) {
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs[this.gridName + this.parentPrgmId],
);
}
}
}
}
},
// row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
if (this.searchParam.isMulti) {
if (data._attributes.checked) {
this.$refs[this.gridName + this.parentPrgmId].uncheckEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
} else {
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
if (this.searchParam.isMulti) {
this.checkedRowDataList = this.$refs[
this.gridName + this.parentPrgmId
].getCheckedRowsEvt();
this.dialog = false;
this.setPageData({ readObjList: this.checkedRowDataList });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.readObjList),
);
} else {
this.dialog = false;
this.setPageData({ readObj: this.activeRowData });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.readObj),
);
}
},
reset() {
for (
var i = 0;
i < this.$refs[this.gridName + this.parentPrgmId].getData().length;
i++
) {
this.$refs[this.gridName + this.parentPrgmId].uncheckEvt(
this.$refs[this.gridName + this.parentPrgmId].getData()[i],
this.$refs[this.gridName + this.parentPrgmId],
);
}
},
search() {
this.getGridData();
},
typeEnterKey() {
this.getGridData();
},
dialogOpenCloseEvent(val) {
this.dialog = !val;
},
},
};
const OnInDataReadPop = {
modalGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
content: none !important;
}
.tui-grid-tree-icon {
margin-left: -21px !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>

379
components/common/modal/ReadPlcDisableFuncPop.vue Normal file
View File

@ -0,0 +1,379 @@
<template>
<v-row class="search-box">
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialog = !dialog"
:hide-details="true"
outlined
></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<v-card style="height: 100%">
<v-card-title>
<span v-if="label" class="custom-title-4">
검침개소
</span>
</v-card-title>
<v-card-actions>
<v-col v-if="label" cols="3">
<label for="" class="search-box-label">
위치정보 선택
</label>
</v-col>
<v-col :cols="label ? 6 : ''">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="btnTreeExpand()">{{
treeExpand
}}</v-btn>
<v-btn color="primary" dark>초기화</v-btn>
</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.readPlcListTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
</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-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
default: '공장/설비',
},
textCols: {
type: Number,
require: false,
default: 7,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
},
components: {
Grid,
// Tree
},
data() {
return {
// label: "공정/설비",
labelPrepend: true,
myModalKey: 'readPlcListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
treeGridInstance: null,
disabledRowKeyList: [],
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue() {
// 선택된 공장/설비 값
const temp = [];
const facData = this.searchParam.isMulti
? this.searchParam.facInfoList
: this.searchParam.facInfo;
if (Array.isArray(facData)) {
if (facData.length > 0) {
for (const item of facData) {
temp.push(item.readPlcNm);
}
}
} else {
return facData.readPlcNm;
}
return temp.join();
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getTreeData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { readPlcListTree },
});
},
created() {
this.init();
this.setPageData({
facInfo:
localStorage.getItem(this.parentPrgmId + 'CheckedRow') != null
? JSON.parse(localStorage.getItem(this.parentPrgmId + 'CheckedRow'))
: {},
});
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
// console.log("init 시작...");
this.activeRowData = {};
this.gridInit();
// this.getTreeData();
// this.lineCOption = chartOption;
},
// 공정/설비 트리 그리드 세팅
gridInit() {
// console.log("gridInit 시작...");
const treeGridHeight = 490; // this.$refs.treeGridParent.offsetHeight - 30;
const myOptionsTree = {
treeColumnOptions: {
name: 'readPlcNm',
//useCascadingCheckbox: false
},
};
if (this.searchParam.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
myOptionsTree['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
myOptionsTree['treeColumnOptions']['useCascadingCheckbox'] = false;
} else {
delete this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders;
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(
Utility.defaultGridOption(treeGridHeight),
myOptionsTree,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [
{
header: '측정 개소명',
name: 'readPlcNm',
width: 480,
align: 'left',
},
{
header: 'enableFg',
name: 'enableFg',
width: 480,
align: 'left',
hidden: true,
},
// , { header: "측정 개소", name: "name", align: "center"}
],
});
},
// 공정/설비 조회
async getTreeData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectReadPlcDataForEnrgLossAnalysis',
resKey: 'enrgLossAnalysisData',
sendParam: {
blocId: this.searchParam.blocId, //"BL0001",
readObjid: this.searchParam.energyCd,
},
});
console.log('getTreeData : ', res);
// 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.readPlcNm,
upReadPlcId:
item.upReadPlcId == null || item.upReadPlcId == ''
? ''
: item.upReadPlcId,
})),
});
this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT,
});
this.loadGrid = true;
const setTreeDataKeys = Object.keys(setTreeData);
// let nowTreeData = [];
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows();
}
for (var i = 0; i < setTreeDataKeys.length; i++) {
for (var j = 0; j < setTreeData[setTreeDataKeys[i]].length; j++) {
if (setTreeData[setTreeDataKeys[i]][j]['enableFg'] == 0) {
this.disabledRowKeyList.push(
setTreeData[setTreeDataKeys[i]][j]['rowKey'],
);
}
}
}
for (var i = 0; i < this.disabledRowKeyList.length; i++) {
this.$refs['treeGrid' + this.parentPrgmId].disabledRow(
this.disabledRowKeyList[i],
);
}
// console.log('treeGrid' + this.parentPrgmId);
// console.log("확인", this.$refs['treeGrid' + this.parentPrgmId].getData());
// this.treeGridInstance = this.$refs['treeGrid' + this.parentPrgmId];
// nowTreeData = this.treeGridInstance.getData();
// rowDatas.forEach(item => {
// if (item.rowKey == rowKey) {
// this.gridInstance.invoke(
// "addRowClassName",
// item.rowKey,
// "row-selected"
// );
// } else {
// this.gridInstance.invoke(
// "removeRowClassName",
// item.rowKey,
// "row-selected"
// );
// }
// });
});
},
// 공정/설비 트리 row 클릭이벤트
async getRowData(data) {
// console.log("getRowData 시작...");
console.log('data', data);
this.activeRowData = data;
// if(data.enableFg == 1){
// this.activeRowData = data;
// }
},
setUpdate() {
// console.log("setUpdate 시작...");
if (this.disabledRowKeyList.includes(this.activeRowData['rowKey'])) {
alert('활성화된 항목을 선택해주세요');
return;
}
if (this.activeRowData) {
this.dialog = false;
this.setPageData({ facInfo: this.activeRowData });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.facInfo),
);
}
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
// console.log("btnTreeExpand 시작...");
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll)
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
else this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
},
},
};
const readPlcListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
eqpmYn: 1,
};
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

552
components/common/modal/ReadPlcPop.vue Normal file
View File

@ -0,0 +1,552 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- <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-col>
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="600"
overlay-color="#000"
overlay-opacity="0.8"
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"
>
<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>
</v-card-title>
<!-- <v-card-actions> -->
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col v-if="label" cols="3">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? 6 : ''">
<!-- :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-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-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<!-- <v-btn :ripple="false">초기화</v-btn> -->
<!-- <v-btn v-if="searchParam.isMulti" :ripple="false" @click="reset()">초기화</v-btn>
<v-btn v-if="!searchParam.isMulti" :ripple="false" @click="search()">검색</v-btn> -->
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</v-col>
</v-row>
<!-- <v-btn color="primary" dark @click="btnTreeExpand()">{{
treeExpand
}}</v-btn> -->
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<!-- <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()"
/>
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
:tree-data="ftnPlcListTreeData"
/> -->
</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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '검침개소',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '검침대상 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
},
},
components: {
Grid,
// Tree
},
data() {
return {
labelPrepend: true,
myModalKey: 'selectReadObjListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
checkedRowDataList: [],
searchWord: '', // 팝업내 검색
// isUpdate: false
// ftnPlcListTreeData: []
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
rowGridSelectData(state) {
if (!this.bindingData) {
return state.pageData[this.parentPrgmId].rowGridSelectData;
} else {
return state.pageData[this.parentPrgmId][this.bindingData]
.rowGridSelectData;
}
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue: {
get() {
// if(this.searchParam.rowGridSelectData){
// return this.searchParam.rowGridSelectData[this.item.valueNm];
// }
return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
},
set(value) {
// return value;
// return this.myBindingData({ [this.item.valueNm]: value });
//return this.setPageData({ [this.item.valueNm]: value });
return this.myBindingData({ [this.item.valueNm]: value });
},
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getTreeData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectReadObjListTree },
});
},
created() {
this.init();
// if(this.searchParam.isMulti == true){
// this.setPageData({
// facInfoList : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }else{
// this.setPageData({
// facInfo : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const treeGridHeight = 490;
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [
{
header: '검침개소명',
name: 'readPlcNm',
width: 370,
align: 'left',
},
{ header: '검침개소', name: 'name', align: 'center' },
],
});
},
// 공정/설비 조회
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" // 전력 코드 고정
useFg: '1',
readPlcNmLike: this.searchWord,
},
});
// console.log("treeData", res)
let myOptionsTree = {
treeColumnOptions: {
name: 'readPlcNm',
},
};
if (this.searchParam.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
myOptionsTree['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
myOptionsTree['treeColumnOptions']['useCascadingCheckbox'] = false;
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(Utility.defaultGridOption(490), myOptionsTree),
});
// 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,
})),
});
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT || [],
});
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows();
}
});
},
setGridCheckedRows() {
this.checkedRowDataList =
this.searchParam.plcKindList.length > 0
? this.searchParam.plcKindList
: [];
if (this.checkedRowDataList.length > 0) {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
}
},
// 공정/설비 트리 row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
if (this.searchParam.isMulti) {
if (data._attributes.checked) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
} else {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
if (this.searchParam.isMulti) {
// 멀티 처리 필요사 시용...
// this.checkedRowDataList = this.$refs['treeGrid' + this.parentPrgmId].getCheckedRowsEvt();
// if(this.checkedRowDataList.length < 20){
// this.dialog = false;
// this.setPageData({facInfoList : this.checkedRowDataList});
// }else{
// alert("비교대상이 20개를 초과하였습니다.");
// }
} else {
this.dialog = false;
const dt = {
columnName: this.item.valueNm,
value: this.activeRowData.name,
};
var nm = this.item.valueNm;
if (this.item.valueNm2 !== undefined) {
const dt = {
columnName: this.item.valueNm2,
value: this.activeRowData[this.item.valueNm2],
};
this.$emit('gridEditingFinish', dt);
}
if (nm == 'objReadPlcId') {
this.myBindingData.objReadPlcId = this.activeRowData.name;
this.myBindingData.objReadPlcNm = this.activeRowData.readPlcNm;
const dt2 = {
columnName: 'objReadPlcNm',
value: this.activeRowData.readPlcNm,
};
this.$emit('gridEditingFinish', dt2);
} else if (nm == 'readPlcId') {
this.myBindingData.readPlcId = this.activeRowData.name;
this.myBindingData.readPlcNm = this.activeRowData.readPlcNm;
} else if (nm == 'upReadPlcId') {
this.myBindingData.upReadPlcId = this.activeRowData.name;
this.myBindingData.upReadPlcNm = this.activeRowData.readPlcNm;
} else {
this.myBindingData.upReadPlcId = this.activeRowData.name;
if (this.item.bindNm) {
this.myBindingData[this.item.bindNm] = this.activeRowData.readPlcNm;
var bindDt = {
columnName: this.item.bindNm,
value: this.activeRowData.readPlcNm,
};
this.$emit('gridEditingFinish', bindDt);
}
}
this.$emit('gridEditingFinish', dt);
}
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll) {
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
} else {
this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
}
},
typeEnterKey() {
this.getTreeData();
},
},
};
const selectReadObjListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

419
components/common/modal/ReadPlcWidgetPop.vue Normal file
View File

@ -0,0 +1,419 @@
<template>
<span>
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon class="mr-1" v-bind="attrs" v-on="on" @click="dialog = true"
>mdi-tooltip-plus
</v-icon>
</template>
<span>검침개소</span>
</v-tooltip>
<v-dialog
ref="popModal"
v-model="dialog"
width="600"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-card style="height: 100%">
<v-card-title
class="v-card__title d-flex align-center justify-space-between"
>
<span class="custom-title-4">검침개소</span>
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
<v-icon>mdi-close</v-icon>
</v-btn>
</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="7">
<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-col>
<v-spacer></v-spacer>
<v-col cols="3" class="text-right">
<v-btn v-if="searchParam.isMulti" :ripple="false" @click="reset()"
>초기화</v-btn
>
<v-btn :ripple="false" icon tile @click="btnTreeExpand()">
<v-icon
size="30"
v-text="treeExpandAll ? 'mdi-chevron-up' : 'mdi-chevron-down'"
></v-icon>
</v-btn>
<v-btn :ripple="false" @click="reset()">초기화</v-btn>
</v-col>
</v-row>
</div>
<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.selectReadPlcListTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
</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-card-actions>
</v-card>
</v-dialog>
</span>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
widGetKey: {
type: String,
require: true,
},
widgetDataKey: {
type: String,
require: true,
},
isMulti: {
type: Boolean,
require: false,
default: null,
},
mntrFg: {
type: String,
require: false,
default: null,
},
},
components: {
Grid,
// Tree
},
data() {
return {
myModalKey: 'selectReadPlcListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
maxSelectableNum: 12,
searchWord: '', // 팝업내 검색
};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId][this.widGetKey][
this.widgetDataKey
];
},
}),
chkDialog() {
return this.dialog;
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getTreeData();
}
},
},
beforeCreate() {},
created() {
this.$store.state.pageData[this.parentPrgmId][this.widGetKey][
this.widgetDataKey
].modalData = { selectReadPlcListTree };
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
setWidgetModalGridData: 'setWidgetModalGridData',
setWidgetModalGridColumn: 'setWidgetModalGridColumn',
setWidgetModalGridOption: 'setWidgetModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
this.activeRowData = {};
this.gridInit();
},
// 공정/설비 트리 그리드 세팅
gridInit() {
const treeGridHeight = 490;
if (this.$store.state.activeMenuInfo.prgmId == '0') {
this.$store.state.activeMenuInfo.prgmId = this.$route.query.prgmId;
}
this.setWidgetModalGridColumn({
widgetId: this.widGetKey,
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [
{
header: '검침개소명',
name: 'readPlcNm',
width: 370,
align: 'left',
},
{ header: '검침개소', name: 'name', align: 'center' },
],
});
},
// 공정/설비 조회
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.searchReadObj, // "MTT00001" // 전력 코드 고정
mntrFg: this.mntrFg,
useFg: '1',
readPlcNmLike: this.searchWord,
},
});
let myOptionsTree = {
treeColumnOptions: {
name: 'readPlcNm',
},
};
if (this.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
myOptionsTree['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
myOptionsTree['treeColumnOptions']['useCascadingCheckbox'] = false;
}
this.setWidgetModalGridOption({
widgetId: this.widGetKey,
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: Object.assign(Utility.defaultGridOption(490), myOptionsTree),
});
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.setWidgetModalGridData({
widgetId: this.widGetKey,
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT || [],
});
this.loadGrid = true;
this.$nextTick(() => {
if (this.isMulti) {
this.setGridCheckedRows();
}
});
},
setGridCheckedRows() {
this.checkedRowDataList =
this.searchParam.plcKindList.length > 0
? this.searchParam.plcKindList
: [];
if (this.checkedRowDataList.length > 0) {
for (var i = 0; i < this.checkedRowDataList.length; i++) {
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
this.checkedRowDataList[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
}
},
getRowData(data) {
if (this.isMulti) {
if (data._attributes.checked) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
} else {
var checkedRowNumber = this.$refs[
'treeGrid' + this.parentPrgmId
].getCheckedRowsEvt().length;
if (checkedRowNumber >= this.maxSelectableNum) {
alert(
'최대 ' + this.maxSelectableNum + '개까지 선택할 수 있습니다.',
);
return;
}
this.$refs['treeGrid' + this.parentPrgmId].checkEvt(
data,
this.$refs['treeGrid' + this.parentPrgmId],
);
}
} else {
this.activeRowData = data;
}
},
setUpdate() {
if (this.isMulti) {
this.checkedRowDataList = this.$refs[
'treeGrid' + this.parentPrgmId
].getCheckedRowsEvt();
// this.$store.state.pageData[this.parentPrgmId][this.widGetKey][this.widgetDataKey].selectedReadPlcList = this.checkedRowDataList;
this.$store.state.pageData[this.parentPrgmId][this.widGetKey][
this.widgetDataKey
].plcKindList = this.checkedRowDataList;
} else {
this.$store.state.pageData[this.parentPrgmId][this.widGetKey][
this.widgetDataKey
].plcKindList = this.activeRowData;
}
this.$emit('chDialogView' + this.widGetKey);
this.dialog = false;
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll) {
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
} else {
this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
}
},
typeEnterKey() {
this.getTreeData();
},
reset() {
for (
var i = 0;
i < this.$refs['treeGrid' + this.parentPrgmId].getData().length;
i++
) {
this.$refs['treeGrid' + this.parentPrgmId].uncheckEvt(
this.$refs['treeGrid' + this.parentPrgmId].getData()[i],
this.$refs['treeGrid' + this.parentPrgmId],
);
}
this.searchWord = '';
},
},
};
const selectReadPlcListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.v-dialog {
overflow-y: hidden !important;
}
.tui-grid-table-container {
.tui-grid-table {
border-right-style: solid !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
}
.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>

359
components/common/modal/SelectReadPlcPop.vue Normal file
View File

@ -0,0 +1,359 @@
<template>
<v-row class="search-box">
<v-col v-if="label" :cols="labelCols">
<!-- <label for="" class="search-box-label"> -->
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<!-- :value="textfield" -->
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialog = !dialog"
:hide-details="true"
outlined
></v-text-field>
</v-col>
<!-- <v-row justify="center"> -->
<v-dialog v-model="dialog" scrollable width="540px">
<!-- <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>
<!-- <span v-if="!label" class="text-h5">
공정/설비
</span> -->
<span v-if="label" class="custom-title-4">
검침개소
</span>
</v-card-title>
<v-card-actions>
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-col v-if="label" cols="3">
<label for="" class="search-box-label">
위치정보 선택
</label>
</v-col>
<v-col :cols="label ? 6 : ''">
<!-- :value="textfield" -->
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="btnTreeExpand()">{{
treeExpand
}}</v-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<v-btn color="primary" dark>초기화</v-btn>
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</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.selectFtnPlcListTree"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
:tree-data="ftnPlcListTreeData"
/> -->
</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>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
label: {
type: String,
require: false,
default: '공장/설비',
},
textCols: {
type: Number,
require: false,
default: 7,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
},
components: {
Grid,
// Tree
},
data() {
return {
// label: "공정/설비",
labelPrepend: true,
myModalKey: 'selectFtnPlcListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
modalDataKey: 'modalData',
treeExpandAll: true,
activeRowData: {},
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue() {
// 선택된 공장/설비 값
const temp = [];
const facData = this.searchParam.isMulti
? this.searchParam.facInfoList
: this.searchParam.facInfo;
if (Array.isArray(facData)) {
if (facData.length > 0) {
for (const item of facData) {
temp.push(item.readPlcNm);
}
}
} else {
return facData.readPlcNm;
}
return temp.join();
},
treeExpand() {
return this.treeExpandAll ? '접기' : '펼치기';
},
},
watch: {
async chkDialog(val) {
if (val) {
await this.getTreeData();
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectFtnPlcListTree },
});
},
created() {
this.init();
// this.setPageData({
// facInfo : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
}),
init() {
// console.log("init 시작...");
this.activeRowData = {};
this.gridInit();
// this.getTreeData();
// this.lineCOption = chartOption;
},
// 공정/설비 트리 그리드 세팅
gridInit() {
// console.log("gridInit 시작...");
const treeGridHeight = 490; // this.$refs.treeGridParent.offsetHeight - 30;
const myOptionsTree = {
treeColumnOptions: {
name: 'readPlcNm',
//useCascadingCheckbox: false
},
};
if (this.searchParam.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
myOptionsTree['rowHeight'] = 'auto'; // checkbox와 그리드 높이 같게
myOptionsTree['treeColumnOptions']['useCascadingCheckbox'] = false;
} else {
delete this.$store.state.pageData[this.parentPrgmId]['modalData'][
this.myModalKey
].treeGrid.option.rowHeaders;
}
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
// value: myOptionsTree
value: Object.assign(
Utility.defaultGridOption(treeGridHeight),
myOptionsTree,
),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [
{
header: '측정 개소명',
name: 'readPlcNm',
width: 370,
align: 'left',
},
{ header: '측정 개소', name: 'name', align: 'center' },
],
});
},
// 공정/설비 조회
async getTreeData() {
// console.log("getTreeData 시작...");
this.loadGrid = false;
// console.log("getTreeData energyList : ", this.searchParam.energyList);
// console.log("getTreeData energyCd : ", this.searchParam.energyCd);
const res = await this.postApiReturn({
apiKey: 'selectReadPlcTree',
resKey: 'ftnPlcTreeData',
sendParam: {
blocId: this.searchParam.blocMstrList[this.searchParam.blocId].blocId, //"BL0001",
// mttCd: this.searchParam.energyList[this.searchParam.energyCd].cd
mttCd: this.searchParam.energyCd,
},
});
// console.log("getTreeData : ", res);
// 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.readPlcNm,
upReadPlcId:
item.upReadPlcId == null || item.upReadPlcId == ''
? ''
: item.upReadPlcId,
})),
});
this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT,
});
this.loadGrid = true;
this.$nextTick(() => {
if (this.searchParam.isMulti) {
this.setGridCheckedRows();
}
});
},
// 공정/설비 트리 row 클릭이벤트
async getRowData(data) {
// console.log("getRowData 시작...");
this.activeRowData = data;
},
setUpdate() {
// console.log("setUpdate 시작...");
if (this.activeRowData) {
this.dialog = false;
this.setPageData({ facInfo: this.activeRowData });
localStorage.setItem(
this.parentPrgmId + 'CheckedRow',
JSON.stringify(this.searchParam.facInfo),
);
}
},
// 공정/설비 트리 접기/펼치기
btnTreeExpand() {
// console.log("btnTreeExpand 시작...");
this.treeExpandAll = !this.treeExpandAll;
if (this.treeExpandAll)
this.$refs['treeGrid' + this.parentPrgmId].expandAll();
else this.$refs['treeGrid' + this.parentPrgmId].collapseAll();
},
},
};
const selectFtnPlcListTree = {
treeGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
eqpmYn: 1,
};
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

557
components/common/modal/TagTrndTagPop.vue Normal file
View File

@ -0,0 +1,557 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-dialog
ref="popModal"
v-model="dialog"
width="1200px"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-card style="height: 100%" class="searchFilter">
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
:labelCols="4"
:textCols="7"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비그룹'"
:labelCols="4"
:textCols="7"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox3"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'설비'"
:labelCols="4"
:textCols="7"
@update:propsValue="selectValue03 = $event"
/>
</v-col>
<v-col :cols="3">
<v-row align="center">
<v-col :cols="3" style="width: 100%">
<label for="" class="search-box-label">
<v-icon x-small :color="'primary'" class="mr-1"
>mdi-record-circle</v-icon
>
TAG명
</label>
</v-col>
<v-col :cols="8" style="width: 100%">
<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-col :cols="1" style="width: 100%" class="text-right">
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
</v-col>
<!-- <v-col :cols="1" class="text-right">
<v-btn icon tile :ripple="false" @click="dialogOpenCloseEvent()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col> -->
</v-row>
</div>
<v-divider></v-divider>
<!-- <div id="chartParent" ref="chartParent" style="height: 100px"> -->
<div :style="'height: 550px'" ref="modalGridDiv">
<!-- <div :style="'height: 50vh'" ref="modalGridDiv"> -->
<!-- <div :style="'height: calc(50%)'"> -->
<div
class="d-flex align-center justify-space-between pa-4"
style="height: 10%"
>
<v-card-title class="pa-0 custom-title-4">TAG 리스트</v-card-title>
</div>
<!-- <div id="chartParent" ref="chartParent" :style="'height: 80%'"> -->
<div ref="modalGridParent" class="h100 w100">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:ref="gridName + parentPrgmId"
:gridName="gridName"
:dataPath="searchParam.tagTrndPopModalData.tagTrndPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate($event)"
/>
</div>
</div>
<v-divider></v-divider>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
<v-btn color="primary" dark @click="dialogOpenCloseEvent(dialog)"
>취소</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '~/components/common/input/InputText';
import Chart from '~/components/common/Chart';
import SelectBox from '@/components/common/select/SelectBox';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
},
},
components: {
Grid,
selectCodeList,
InputText,
Chart,
SelectBox,
// Tree
},
data() {
return {
labelPrepend: true,
gridName: 'grid_01',
myModalKey: 'tagTrndPop',
modalDataKey: 'tagTrndPopModalData',
// gridName: 'rowElecContGrid',
loadChart: false,
// selectedTargetMonth: 'all',
dialog: false,
selectValue01: null,
selectValueList01: [],
selectValue02: null,
selectValueList02: [],
selectValue03: null,
selectValueList03: [],
searchWord: '',
loadGrid: false,
initFlag: false,
selectedData: {},
totalSelectedTags: '',
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
// chkTotalSelectedTags(state) {
// return state.pageData[this.parentPrgmId]['totalSelectedTags'];
// }
chkTotalSelectedTags(state) {
return this.searchParam['totalSelectedTags'];
},
}),
chkDialog() {
return this.dialog;
},
// get() {
// // if(this.searchParam.rowGridSelectData){
// // return this.searchParam.rowGridSelectData[this.item.valueNm];
// // }
// return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
// },
// set(value) {
// // return value;
// // return this.myBindingData({ [this.item.valueNm]: value });
// //return this.setPageData({ [this.item.valueNm]: value });
// return this.myBindingData({ [this.item.valueNm]: value });
// },
// },
},
watch: {
async chkDialog(val) {
if (val) {
// await this.setSelectValueList01();
// await this.setSelectValueList02();
// await this.setSelectValueList03();
this.search();
} else {
this.dialogOpenCloseEvent(val);
}
this.$nextTick();
this.dialog = val;
},
async selectValue01(value) {
await this.setSelectValueList02();
// if(this.selectValue02 == '0'){
// this.search();
// }else{
// this.setSelectValueList02();
// }
},
async selectValue02(value) {
await this.setSelectValueList03();
},
async selectValue03(value) {
if (this.initFlag) {
this.search();
}
},
chkTotalSelectedTags(value) {
this.totalSelectedTags = value;
},
},
beforeCreate() {
this.$store.commit('setPageData', {
tagTrndPopModalData: { tagTrndPop },
});
},
async created() {
await this.setSelectValueList01();
await this.setSelectValueList02();
await this.setSelectValueList03();
this.init();
// if(this.searchParam.isMulti == true){
// this.setPageData({
// facInfoList : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }else{
// this.setPageData({
// facInfo : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
// });
// }
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
async init() {
// this.setChart();
this.gridInit();
await this.setGridData();
this.initFlag = true;
},
async setSelectValueList01() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmKindCodeList',
resKey: 'eqpmKindCodeLists',
sendParam: {},
});
// this.setPageData({
// eqpmKindIdList: res,
// eqpmKindId: res[0].eqpmKindId,
// });
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
data: {
...item,
},
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
},
async setSelectValueList02() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { eqpmKindId: this.selectValue01 },
});
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
};
});
this.selectValue02 = this.selectValueList02[0].value;
} else {
this.selectValueList02 = [];
this.selectValue02 = null;
}
// this.setPageData({
// eqpmGrpList: this.selectValueList02,
// eqpmGrpId: this.selectValue02,
// });
},
async setSelectValueList03() {
var res = await this.postApiReturn({
apiKey: 'selectEqpmBaseInfo',
resKey: 'eqpmBaseInfoData',
sendParam: {
eqpmGrpId: this.selectValue02,
},
});
if (res.length > 0) {
this.selectValueList03 = await res.map(item => {
return {
text: item.eqpmNm,
value: item.eqpmId,
data: {
...item,
},
};
});
this.selectValueList03.unshift({
text: '전체',
value: 'all',
});
// 설비 그룹을 변경하여 설비를 다시 조회하였지만 이전에 조회한 값이 '전체'일 경우
// watch에서 값 변화를 인지 못하기 때문에 여기서 조회 시킨다.
if (this.selectValue03 == 'all' && this.initFlag) {
this.search();
}
this.selectValue03 = this.selectValueList03[0].value;
} else {
this.selectValueList03 = [];
this.selectValue03 = null;
}
},
// 계약 정보 조회
setUpdate() {
if (this.selectedData.tagId != undefined) {
let res = this.chkDuplicateTagId(this.selectedData.tagId);
if (res) {
alert('TAG가 중복 됩니다.');
} else {
if (this.selectedData.tagId != undefined) {
}
this.dialog = false;
for (var key in this.searchParam['rowGrid']['defaultRow']) {
let dt = {
columnName: key,
value: this.selectedData[key],
};
this.$emit('gridEditingFinish', dt);
this.setPageData({ rowGridSelectData: this.selectedData });
}
// this.$emit('gridEditingFinish', dt);
// 중복 선택 및
// let tempWord = '';
// tempWord += this.selectedData.tagId + '/*wq2a/';
// let totalSelectedTags = this.totalSelectedTags + tempWord;
// let tempTagList = totalSelectedTags.split('/*wq2a/');
// let tagList = tempTagList.filter(item => item != '');
let tagList = this.searchParam.tagList;
tagList.push(this.selectedData.tagId);
// console.log('temp!!!', temp);
// console.log('tagList!!!', tagList);
// this.setPageData({ totalSelectedTags : totalSelectedTags });
this.setPageData({ tagList: tagList });
}
} else {
alert('TAG를 선택해주세요.');
}
},
dialogOpenCloseEvent(val) {
this.searchWord = '';
if (val) {
this.dialog = !val;
} else {
this.$emit('closePopEvent');
}
},
async search() {
await this.setGridData();
},
gridInit() {
// const gridHeight = this.$refs.modalGridParent.offsetHeight - 60
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(460, myOptions),
myOptions,
),
});
const _this = this;
const myColumns = [
// { header: '가이드ID', name: 'gdIdxId', align: 'center', hidden: true},
{ header: '설비그룹', name: 'eqpmGrpNm', align: 'center', width: 130 },
{
header: '설비그룹 ID',
name: 'eqpmGrpId',
align: 'center',
hidden: true,
},
{ header: '설비ID', name: 'eqpmId', align: 'left', width: 130 },
{ header: '설비명', name: 'eqpmNm', align: 'left', width: 130 },
{ header: 'TAG ID', name: 'tagId', align: 'left', width: 470 },
{ header: 'TAG 명', name: 'tagNm', align: 'left' },
{ header: 'rowStat', name: 'rowStat', align: 'center', hidden: true },
];
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
this.loadGrid = true;
},
async setGridData() {
this.loadGrid = false;
let searchParam = {
eqpmGrpId: this.selectValue02,
eqpmId: this.selectValue03,
searchWord: this.searchWord,
};
let res = [];
res = await this.postApiReturn({
apiKey: 'selectTagAndEqpmList',
resKey: 'tagTrndDatas',
sendParam: searchParam,
});
let newRes = [];
if (this.searchParam['tagList'].length > 0) {
newRes = res.filter(item => {
return !this.searchParam['tagList'].includes(item.tagId);
});
res = newRes;
}
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
this.$nextTick(() => {
if (res.length > 0) {
try {
this.$refs[this.gridName + this.parentPrgmId].focus({
rowKey: 0,
setScroll: true,
});
} catch (error) {
// console.log('error', error);
}
}
// await this.setGridData();
});
this.loadGrid = true;
},
getRowData(data) {
this.selectedData = { ...data };
},
chkDuplicateTagId(data) {
let res = false;
let tempList = [];
// tempList = this.totalSelectedTags.split('/*wq2a/');
tempList = this.searchParam.tagList;
if (tempList.includes(data)) {
res = true;
}
return res;
},
},
};
let tagTrndPop = {
grid_01: {
data: [],
column: {},
option: {},
},
};
// 전력량 요금(원/kWh)
</script>

202
components/common/modal/UnusedStatPopPage.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<v-banner>
<div
class="d-flex align-center justify-space-between"
style="cursor:pointer"
@click="dialog = !dialog"
>
<v-card-subtitle class="pa-0">미사용개소</v-card-subtitle>
<v-avatar
size="36"
:color="isDarkMode ? '#fb5a8b' : '#ff7b8b'"
min-width="72"
class="font-weight-bold text-color--white-0"
>{{ pointNoUse }}</v-avatar
>
</div>
<v-dialog v-model="dialog" scrollable width="600px">
<v-card style="height: 100%">
<v-card-title>
<span class="custom-title-4">미사용 개소 조회</span>
</v-card-title>
<v-card-actions>
<v-col>
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
v-model="searchWord"
@keyup.enter="typeEnterKey"
></v-text-field>
</v-col>
</v-card-actions>
<v-divider></v-divider>
<v-card-text>
<div ref="rowGridParent" style="height: 300px">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.unUsedData.selectUnusedReadPlc"
:parentPrgmId="parentPrgmId"
/>
</div>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark>확인</v-btn>
<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-banner>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid2';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
pointNoUse: {
type: Number,
require: true,
},
},
components: {
Grid,
},
data() {
return {
modalDataKey: 'unUsedData',
myModalKey: 'selectUnusedReadPlc',
gridName: 'unUsedGrid',
loadGrid: false,
searchWord: '',
dialog: false,
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
isDarkMode: 'isDarkMode',
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
},
watch: {
async chkDialog(val) {
if (val) {
// 열릴 때
await this.getData();
} else {
// 닫힐 때
}
},
},
beforeCreate() {
if (this.$store.state.activeMenuInfo.prgmId == '0') {
this.$store.state.activeMenuInfo.prgmId = this.$route.query.prgmId;
}
this.$store.commit('setPageData', {
unUsedData: { selectUnusedReadPlc },
});
// console.log("2.vue::beforeCreate");
},
created() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
// setTree: "modules/list/setTree"
}),
init() {
this.gridInit();
},
gridInit() {
const gridHeight = 290;
//const gridHeight = this.$refs.rowGridParent.offsetHeight - 30;
const myOptions = {};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
},
async getData() {
this.loadGrid = false;
let sendParams = {
readPlcNm: this.searchWord,
};
const res = await this.postApiReturn({
apiKey: 'selectUnusedReadPlc',
resKey: 'unusedData',
sendParam: sendParams,
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
// 검색
typeEnterKey() {
this.getData();
},
},
};
const selectUnusedReadPlc = {
unUsedGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
};
const myColumns = [
{ header: '사업장', name: 'blocNm', width: 100, align: 'center' },
{ header: '에너지원', name: 'readObjNm', width: 100, align: 'center' },
{ header: '검침개소명', name: 'readPlcNm', width: 240 },
{ header: '값', name: 'useVal', width: 100, align: 'right' },
];
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

269
components/common/modal/UserPopPage.vue Normal file
View File

@ -0,0 +1,269 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialog = !dialog"
outlined
:hide-details="true"
></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<v-card style="height: 100%">
<v-card-title>
<span class="custom-title-4">사용자 조회</span>
</v-card-title>
<v-card-actions>
<v-col>
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
v-model="searchWord"
@keyup.enter="typeEnterKey"
></v-text-field>
</v-col>
</v-card-actions>
<v-divider></v-divider>
<v-card-text>
<div ref="rowGridParent" style="height: 300px">
<component
:ref="gridName + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
:dataPath="searchParam.modalData.selectUserPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
</div>
</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-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
},
components: {
Grid,
},
data() {
return {
label: '사용자',
modalDataKey: 'modalData',
myModalKey: 'selectUserPop',
gridName: 'rowGrid',
loadGrid: false,
searchWord: '',
dialog: false,
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
chkDialog() {
// 모달 열기/닫기 값
return this.dialog;
},
selectValue() {
// 선택된 공장/설비 값
return this.searchParam.selecUserList.length > 0
? this.searchParam.selecUserList.map(item => item.userNm)
: null;
},
},
watch: {
async chkDialog(val) {
if (val) {
// 열릴 때
await this.getData();
// console.log("chkDialog: ", val);
if (this.searchParam.selecUserList.length > 0) {
for (var i = 0; i < this.searchParam.selecUserList.length; i++) {
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
this.searchParam.selecUserList[i],
this.$refs[this.gridName + this.parentPrgmId],
);
}
}
// this.$refs[this.gridName + this.parentPrgmId].setCheck(
// this.searchParam.selecUserListRowKeys
// );
} else {
// 닫힐 때
this.setPageData({
myUserList:
this.searchParam.selecUserList.length > 0
? this.searchParam.selecUserList.map(item => item.userNo)
: '',
});
}
},
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData: { selectUserPop },
});
// console.log("2.vue::beforeCreate");
},
created() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
// setTree: "modules/list/setTree"
}),
init() {
this.gridInit();
},
gridInit() {
const gridHeight = 490; // this.$refs.rowGridParent.offsetHeight - 30;
const myOptions = {
rowHeaders: ['checkbox'],
};
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: myColumns,
});
},
async getData() {
this.loadGrid = false;
let sendParams = {
userNm: this.searchWord,
userNo: '',
userLoginId: '',
deptId: '',
};
const res = await this.postApiReturn({
apiKey: 'selectUserPop',
resKey: 'userData',
sendParam: sendParams,
});
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res,
});
this.loadGrid = true;
},
// 공정/설비 트리 row 클릭이벤트
getRowData(data) {
//this.activeRowData = data;
if (data._attributes.checked) {
this.$refs[this.gridName + this.parentPrgmId].uncheckEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
} else {
this.$refs[this.gridName + this.parentPrgmId].checkEvt(
data,
this.$refs[this.gridName + this.parentPrgmId],
);
}
},
setUpdate() {
// console.log("이게뭐야", this.$refs[this.gridName + this.parentPrgmId])
this.dialog = false;
this.setPageData({
selecUserList: this.$refs[
this.gridName + this.parentPrgmId
].getCheckedRowsEvt(),
});
// this.setPageData({
// selecUserListRowKeys: this.$refs[
// this.gridName + this.parentPrgmId
// ].getCheckedRowKeys()
// });
},
// 검색
typeEnterKey() {
this.getData();
},
},
};
const selectUserPop = {
rowGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
},
eqpmYn: 1,
};
const myColumns = [
{ header: '사용자NO', name: 'userNo', align: 'center' },
{ header: '사용자ID', name: 'userLoginId' },
{ header: '사용자명', name: 'userNm' },
{ header: '부서명', name: 'deptNm' },
];
</script>
<style scoped>
.v-input {
font-size: 12px;
}
.v-label {
font-size: 10px;
}
</style>

Some files were not shown because too many files have changed in this diff Show More