Files
sk_fems_ui/pages/ems/base/EnrgResourceCenterMngPage.vue

1000 lines
22 KiB
Vue

<template>
<div class="l-layout">
<CommonPageTitle/>
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 사업장 -->
<component
:is="'SelectBlocMstr'"
ref="SelectBlocMstr"
:textCols="12"
:labelCols="12"
:parentPrgmId="myPrgmId"
:customClass="'select-large'"
/>
</v-col>
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'에너지원 유형'"
dataKey="searchErcKind"
:sendParam="{ commGrpCd: 'EM_ERCKIND', useFg: '1' }"
:addAll="true"
:customClass="'select-large'"
/>
</v-col>
<v-col :cols="3">
<component
:is="'SelectReadObj'"
:parentPrgmId="myPrgmId"
:label="'검침대상'"
dataKey="searchReadObj"
:sendParam="{ useFg: '1' }"
:addAll="true"
:textCols="12"
:labelCols="12"
:customClass="'select-large'"
/>
</v-col>
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'고지 유형'"
dataKey="searchChrgKind"
:sendParam="{ commGrpCd: 'EM_ENGCHAGKIND', useFg: '1' }"
:addAll="true"
:customClass="'select-large'"
/>
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'사용여부'"
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:customClass="'select-large'"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
label="에너지원명"
valueNm="ercNm"
:textCols="12"
:labelCols="12"
:searchOption="true"
:customClass="'input-large'"
/>
</v-col>
<v-col :cols="3">
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch :size="'default'" @click="search" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row >
<v-col :cols="5" class="h100">
<v-card class="pb-5">
<v-card-title class="d-flex justify-space-between align-end">
<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
</v-card-title>
<div class="px-5" style="height:calc(100% - 106px)">
<div ref="gridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true"
/>
</div>
</div>
</v-card>
</v-col>
<v-col :cols="7" class="h100">
<v-card class="pb-5">
<v-card-title>에너지원 상세</v-card-title>
<div class="px-5" style="min-height: auto;">
<v-tabs v-model="tab">
<v-tab
v-for="item in items"
:key="item.id"
:disabled="item.disabledFlag"
>
{{ item.name }}
</v-tab>
</v-tabs>
<v-tabs-items
v-model="tab"
class="py-6"
style="min-height: auto;"
>
<v-tab-item v-for="(item, idx) in items" :key="item.id">
<component
v-if="item.id == 'ercInfoTab'"
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<ErcChrgInfoTab
v-if="item.id == 'ercChrgInfoTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
</v-tab-item>
</v-tabs-items>
</div>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
import selectCodeList from '@/components/common/select/selectCodeList';
import SelectReadObj from '@/components/common/select/SelectReadObj';
import InputText from '@/components/common/input/InputText';
import Form from '~/components/common/form/Form';
import ErcChrgInfoTab from '@/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import DateUtility from '~/plugins/dateUtility';
let myTitle;
// const myPrgmId = "PRG0010";
let myPrgmId;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
// myTitle = myState.activeMenuInfo.menuNm;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
BtnSearch,
Buttons,
SelectBlocMstr,
selectCodeList,
SelectReadObj,
InputText,
Form,
ErcChrgInfoTab,
Grid,
},
data() {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
tab: null,
items: [
{ name: '에너지원 정보', id: 'ercInfoTab', disabledFlag: false },
{ name: '에너지 요금 정보', id: 'ercChrgInfoTab', disabledFlag: false },
],
detailList: myDetail,
};
},
computed: {
// ...mapState({
// pageData: state => state.pageData[myPrgmId]
// }),
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
chkBlocId() {
return this.pageData.blocId;
},
chkErcKind() {
// 시스템구분 선택 감지
return this.pageData.searchErcKind;
},
chkReadObj() {
return this.pageData.searchReadObj;
},
chkChrgKind() {
return this.pageData.searchChrgKind;
},
chkUseFg() {
// 사용여부 선택 감지
return this.pageData.useFg;
},
},
watch: {
chkIsFind(val) {
if (val) this.search();
},
chkBlocId() {
this.setPageData({ isFind: true });
},
chkErcKind() {
this.setPageData({ isFind: true });
},
chkReadObj() {
this.setPageData({ isFind: true });
},
chkChrgKind() {
this.setPageData({ isFind: true });
},
chkUseFg() {
this.setPageData({ isFind: true });
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {
// 측정 Data 구분 목록 조회
this.getCodeList({
dataKey: 'ercKind',
params: { commGrpCd: 'EM_ERCKIND', useFg: '1' },
addAll: false,
});
// 측정 대상 목록 조회
this.getReadObjInfoList({
dataKey: 'readObj',
params: { useFg: '1' },
addAll: false,
});
// 단위 코드 목록 조회
this.getCodeList({
dataKey: 'chrgKind',
params: { commGrpCd: 'EM_ENGCHAGKIND', useFg: '1' },
addAll: false,
});
/////////// 추가 정보 Tab 에서 사용
// 데이터 유형 목록 조회
this.getCodeList({
dataKey: 'addInfoDataKind',
params: { commGrpCd: 'CO_DATA_TYPE', useFg: '1' },
addAll: false,
});
// 추가 정보 목록 조회
this.getAddInfoList({
dataKey: 'addInfo',
params: { addGrpId: 'TAG_INFO', useFg: '1' },
addAll: false,
});
this.search();
},
mounted() {
this.userComId = this.userInfo.comId;
this.init();
},
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapActions({
getCodeList: 'modules/search/getCodeList',
getBlocMstrList: 'modules/search/getBlocMstrList',
getReadObjInfoList: 'modules/search/getReadObjInfoList',
getAddInfoList: 'modules/search/getAddInfoList',
}),
init() {
this.gridInit();
var date = new Date();
this.pageData.toDt =
String(date.getFullYear()) +
String(date.getMonth() + 1).padStart(2, '0');
this.pageData.fromDt = DateUtility.addMonth(-11, 'YYYYMM', date);
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const myOptions = {
columnOptions: {
resizable: true,
},
header: {
height: 38,
},
};
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
const _this = this;
const myColumns = [
{ header: '회사 ID', name: 'comId', hidden: true },
{ header: '에너지원ID', name: 'ercId', width: 120, align: 'left' },
{ header: '에너지원명', name: 'ercNm', align: 'left' },
{
header: '에너지원 유형',
name: 'ercKind',
align: 'left',
formatter({ value }) {
let retVal = '';
const newValue = _this.pageData.ercKindList.filter(
item => item.commCd == value,
);
if (newValue.length > 0) {
retVal = newValue[0].commCdNm;
}
return retVal;
},
},
{
header: '검침대상',
name: 'readObjId',
align: 'left',
formatter({ value }) {
let retVal = '';
const newValue = _this.pageData.readObjList.filter(
item => item.readObjId == value,
);
if (newValue.length > 0) {
retVal = newValue[0].readObjNm;
}
return retVal;
},
},
{
header: '검침 개소 ID',
name: 'readPlcId',
width: 80,
align: 'center',
hidden: true,
},
{
header: '고지 유형',
name: 'chrgKind',
width: 80,
align: 'center',
hidden: true,
formatter({ value }) {
let retVal = '';
const newValue = _this.pageData.chrgKindList.filter(
item => item.commCd == value,
);
if (newValue.length > 0) {
retVal = newValue[0].commCdNm;
}
return retVal;
},
},
{
header: '기본단가',
name: 'unitPrce',
width: 100,
align: 'right',
hidden: true,
},
{
header: '단가 사용여부',
name: 'prceFg',
width: 100,
align: 'center',
hidden: true,
formatter({ value }) {
const newValue = _this.pageData.useFgList.filter(
item => item.commCd == value,
);
return newValue[0].commCdNm;
},
},
{
header: '피크 전력',
name: 'peakPow',
width: 100,
align: 'right',
hidden: true,
},
{
header: '전력 계약',
name: 'elecContId',
width: 100,
align: 'center',
hidden: true,
},
{
header: '전력 계약',
name: 'elecContNm',
width: 100,
align: 'center',
hidden: true,
},
{
header: '사업장',
name: 'blocId',
width: 100,
align: 'center',
hidden: true,
formatter({ value }) {
let retVal = '';
const newValue = _this.pageData.blocMstrList.filter(
item => item.blocId == value,
);
if (newValue.length > 0) {
retVal = newValue[0].blocNm;
}
return retVal;
},
},
{
header: '사용 여부',
name: 'useFg',
width: 95,
align: 'left',
formatter({ value }) {
value = value === true ? '1' : '0';
const newValue = _this.pageData.useFgList.filter(
item => item.commCd == value,
);
return newValue[0].commCdNm;
},
},
];
this.setGridColumn({
gridKey: this.gridName,
value: myColumns,
});
this.loadGrid = true;
this.getRowGridData();
},
async search() {
this.loadGrid = false;
await this.getRowGridData();
await this.setPageData({
isFind: false,
});
this.loadGrid = true;
},
async getRowGridData() {
let res = [];
if (this.pageData.blocMstrList.length > 0) {
res = await this.postApiReturn({
apiKey: 'selectErcInfo',
resKey: 'ercInfoData',
sendParam: {
blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
ercKind: this.pageData.searchErcKind,
readObjId: this.pageData.searchReadObj,
chrgKind: this.pageData.searchChrgKind,
useFg: this.pageData.useFg,
ercNmLike: this.pageData.ercNm,
},
});
} else {
this.setPageData({ isFind: false });
}
const newRes = res.map(item => {
const newObj = {
...item,
rowStat: null,
blocId: item.blocId,
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
prceFg: item.prceFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
};
return newObj;
});
this.loadGrid = true;
this.setGridData({
gridKey: this.gridName,
value: newRes,
});
this.$nextTick(() => {
if (newRes.length > 0) {
this.$refs[this.gridName].focus({
//rowKey: 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnName: 'ercId',
setScroll: true,
});
} else {
this.detailDataInit();
}
});
},
async getRowData(data) {
this.setPageData({
rowGridSelectKey: data.rowKey,
rowGridSelectData: data,
});
const res = await this.postApiReturn({
apiKey: 'selectEnrgChrgPrcInfo',
resKey: 'enrgChrgInfoData',
sendParam: {
comId: data.comId,
blocId: data.blocId,
ercId: data.ercId,
startDt: this.pageData.fromDt,
endDt: this.pageData.toDt,
},
});
const newRes = res.map(item => {
const newObj = {
...item,
comId: item.comId || '',
blocId: item.blocId || '',
ercId: item.ercId || '',
objMm: item.objMm || '',
objYm: item.objYm || '',
strtDt: item.strtDt || '',
endDt: item.endDt || '',
notiChrg: item.notiChrg || '',
baseChrg: item.baseChrg || '',
rmrk: item.rmrk || '',
useQty: item.useQty || '',
unitPrce: item.unitPrce || '',
corrCoff: item.corrCoff || '',
heatCoff: item.heatCoff || '',
peakPow: item.peakPow || '',
elecContId: item.elecContId || '',
rowStat: null,
};
return newObj;
});
this.setGridData({
gridKey: 'rowDetailGrid',
value: newRes,
});
},
detailDataInit() {
this.setPageData({
rowGridSelectKey: null,
rowGridSelectData: [],
});
this.setGridData({
gridKey: 'rowDetailGrid',
value: [],
});
},
getSelectedRowStatInfo(data) {
if (data) {
var rowStat = data.rowStat;
if (rowStat === 'I') {
this.tab = 0;
for (var i = 1; i < this.items.length; i++) {
this.items[i].disabledFlag = true;
}
} else if (rowStat === 'U') {
for (var i = 1; i < this.items.length; i++) {
this.items[i].disabledFlag = false;
}
} else if (rowStat === 'D') {
for (var i = 1; i < this.items.length; i++) {
this.items[i].disabledFlag = false;
}
} else if (rowStat === null) {
for (var i = 1; i < this.items.length; i++) {
this.items[i].disabledFlag = false;
}
}
}
},
async btnActions(action) {
let dataArr = [];
switch (action) {
case 'add':
const defaultRow = {
ercId: '',
ercNm: '',
ercKind: this.pageData.ercKind,
readObjId: this.pageData.readObj,
chrgKind: this.pageData.chrgKind,
unitPrce: 0,
peakPow: '',
blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
elecContId: '',
elecContNm: '',
readPlcId: '',
readPlcNm: '',
prceFg: '1',
useFg: '1',
};
this.$refs[this.gridName].addRow(defaultRow);
break;
case 'remove':
this.$refs[this.gridName].removeRow();
break;
case 'save':
dataArr = this.$refs[this.gridName].save();
var validCheck = true;
if (dataArr.length > 0) {
dataArr.filter(item => {
if (item.rowStat === 'I') {
if (item.ercNm == '') {
alert('필수 입력값을 입력해주세요.');
validCheck = false;
}
} else if (item.rowStat === 'U') {
if (item.ercNm == '') {
alert('필수 입력값을 입력해주세요.');
validCheck = false;
}
}
});
if (validCheck) {
const sendParam = {
datas: {
dsErcInfo: dataArr.map(item => ({
...item,
blocId: item.blocId,
useFg: item.useFg ? '1' : '0',
prceFg: item.prceFg ? '1' : '0',
})),
},
params: {},
};
await this.postUpdateApi({
apiKey: 'saveErcInfo',
sendParam: sendParam,
});
this.$nextTick(() => {
this.setPageData({ isFind: true });
});
}
} else {
alert('저장할 내용이 없습니다.');
}
break;
default:
break;
}
},
gridEditingFinish(data) {
this.$refs[this.gridName].editingFinish(data);
},
},
};
const defaultData = {
/* 검색옵션 */
ercNm: '',
blocId: '',
blocMstrList: [],
searchErcKind: '',
searchErcKindList: [],
searchReadObj: '',
searchReadObjList: [],
searchChrgKind: '',
searchChrgKindList: [],
ercKind: '',
ercKindList: [],
readObj: '',
readObjList: [],
chrgKind: '',
chrgKindList: [],
useFg: '1',
useFgList: [],
addInfoDataKind: '',
addInfoDataKindList: [],
addInfo: '',
addInfoList: [],
searchElecContKind: '',
searchElecContKindList: [],
searchVoltKind: '',
searchVoltKindList: [],
searchOptKind: '',
searchOptKindList: [],
cmCycle: 'CYC_MONTH',
cmCycleList: [
{ idx: 0, text: '연', value: 'CYC_YEAR' },
{ idx: 1, text: '월', value: 'CYC_MONTH' },
{ idx: 2, text: '일', value: 'CYC_DAY' },
{ idx: 3, text: '시간', value: 'CYC_HOUR' },
],
defaultRange: {
CYC_YEAR: 1,
CYC_MONTH: 12,
CYC_DAY: 30,
CYC_HOUR: 0,
},
fromDt: '',
toDt: '',
// 선택된 그룹코드 상세 데이터
rowGridSelectKey: 0,
rowGridSelectData: null,
isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
/* data 세팅 */
// 로컬 gridName 값과 동일한 이름으로 세팅
rowGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
defaultRow: {
comId: '',
ercId: '',
ercNm: null,
ercKind: '',
readObjId: '',
readPlcId: '',
readPlcNm: '',
chrgKind: '',
unitPrce: null,
prceFg: null,
peakPow: null,
elecContId: '',
elecContNm: '',
blocId: null,
useFg: '1',
rowStat: 'I',
},
buttonAuth: {
add: true,
remove: true,
save: true,
excel: false,
},
},
rowDetailGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
defaultRow: {
comId: '',
ercId: '',
objMm: '',
blocId: '',
startDt: null,
endDt: null,
notiChrg: null,
baseChrg: null,
rmrk: null,
useQty: null,
unitPrce: null,
corrCoff: null,
heatCoff: null,
peakPow: null,
elecContId: '',
rowStat: null,
},
buttonAuth: {
remove: true,
save: true,
},
},
rowGridChart: Utility.defaultChartOption({
data: ['기본요금', '고지요금'],
selectedMode: true,
selected: {
기본요금: true,
고지요금: true,
},
}),
};
const myDetail = [
{
type: 'InputText',
label: '에너지원 ID',
valueNm: 'ercId',
readonly: true,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pr-4',
required: false,
placeholder: '시스템 자동입력',
},
{
type: 'InputText',
label: '에너지원 명',
valueNm: 'ercNm',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pl-4',
required: true,
},
{
type: 'SelectBox',
label: '에너지원 유형',
valueNm: 'ercKind',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pr-4 mt-2',
list: 'ercKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
required: true,
},
{
type: 'SelectBox',
label: '검침대상',
valueNm: 'readObjId',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pl-4 mt-2',
list: 'readObjList',
itemText: 'readObjNm',
itemValue: 'readObjId',
required: true,
},
{
type: 'SelectBox',
label: '고지 유형',
valueNm: 'chrgKind',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pr-4 mt-2',
list: 'chrgKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
required: true,
},
{
type: 'InputText',
label: '기본단가',
valueNm: 'unitPrce',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pl-4 mt-2',
},
{
type: 'InputText',
label: '피크 전력',
valueNm: 'peakPow',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pr-4 mt-2',
},
{
type: 'SelectBox',
label: '사업장',
valueNm: 'blocId',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pl-4 mt-2',
list: 'blocMstrList',
itemText: 'blocNm',
itemValue: 'blocId',
required: true,
},
{
type: 'ElecPowChrgPop',
label: '전력 계약',
valueNm: 'elecContId',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
// class: 'py-2',
class: 'pb-0 mb-0 pr-4 mt-2',
disableContent: true,
},
{
type: 'ReadPlcPop',
label: '검침개소',
valueNm: 'readPlcId',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'pb-0 mb-0 pl-4 mt-2',
},
{
type: 'InputText',
valueNm: 'elecContNm',
readonly: true,
cols: 6,
iconShow: true,
class: 'py-2 pr-4',
},
{
type: 'InputText',
valueNm: 'readPlcNm',
readonly: true,
cols: 6,
iconShow: true,
class: 'py-2 pl-4',
},
{
type: 'CheckBox',
label: '단가사용 여부',
valueNm: 'prceFg',
disabled: false,
cols: 6,
iconShow: true,
class: 'py-3 pr-4 mt-2',
value: { '1': true, '0': false },
},
{
type: 'CheckBox',
label: '사용 여부',
valueNm: 'useFg',
disabled: false,
cols: 6,
iconShow: true,
class: 'py-3 pl-4 mt-2',
value: { '1': true, '0': false },
required: true,
},
];
</script>