sk_fems_ui commit
This commit is contained in:
unknown
633
components/pages/ems/EffcIdxInfo/EffcIdxAddInfoTab.vue
Normal file
633
components/pages/ems/EffcIdxInfo/EffcIdxAddInfoTab.vue
Normal file
@ -0,0 +1,633 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
ref="effcIdxId"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="효율지표 ID"
|
||||
valueNm="effcIdxId"
|
||||
:required="false"
|
||||
:readonly="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6"> </v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
ref="effcIdxNm"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="효율지표 명"
|
||||
valueNm="effcIdxNm"
|
||||
:readonly="true"
|
||||
:required="false"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6"> </v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'지표종류'"
|
||||
:textCols="7"
|
||||
:required="false"
|
||||
:readonly="true"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0 custom-title-4">지표연결정보</v-card-title>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
<component
|
||||
v-show="false"
|
||||
ref="EgrpPysclQtyPop"
|
||||
:is="'EgrpPysclQtyPop'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:item="EgrpPysclQtyPopItem"
|
||||
:labelContent="'물리량'"
|
||||
/>
|
||||
<component
|
||||
v-show="false"
|
||||
ref="GdIdxPop"
|
||||
:is="'GdIdxPop'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:item="GdIdxPopItem"
|
||||
:labelContent="'가이드지표'"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<div ref="gridParent" style="height: calc(35vh);">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
import Grid from '~/components/common/Grid';
|
||||
// import Form from '~/components/common/form/Form';
|
||||
import InputText from '@/components/common/input/InputText';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
import Utility from '~/plugins/utility';
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import EgrpPysclQtyPop from '~/components/common/modal/EgrpPysclQtyPop';
|
||||
import GdIdxPop from '~/components/common/modal/GdIdxPop';
|
||||
export default {
|
||||
mixins: [mixinGlobal],
|
||||
components: {
|
||||
Buttons,
|
||||
Grid,
|
||||
// Form,
|
||||
Utility,
|
||||
InputText,
|
||||
SelectBox,
|
||||
EgrpPysclQtyPop,
|
||||
GdIdxPop,
|
||||
},
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
innerTabGridInfo: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
gridName: 'effcInfoGrid',
|
||||
itemList: [],
|
||||
tagTpList: [],
|
||||
// detailList: myDetail,
|
||||
selectValueList01: [],
|
||||
selectValue01: null,
|
||||
EgrpPysclQtyPopItem: {
|
||||
dataList: [],
|
||||
openMode: 'ALL',
|
||||
bindingItemList: {
|
||||
infoPysclQtyId: 'pysclQtyId',
|
||||
infoPysclQtyCd: 'pysclQtyCd',
|
||||
infoPysclQtyNm: 'pysclQtyNm',
|
||||
infoPysclQtyTpNm: 'pysclQtyTpNm',
|
||||
infoTotMeth: 'upTotMeth',
|
||||
infoEqpmGrpId: 'eqpmGrpId',
|
||||
infoEqpmKindId: 'eqpmKindId',
|
||||
infoTotMethNm: 'upTotMethNm',
|
||||
},
|
||||
},
|
||||
GdIdxPopItem: {
|
||||
dataList: [],
|
||||
bindingItemList: {
|
||||
infoGdIdxId: 'gdIdxId',
|
||||
infoGdIdxNm: 'gdIdxNm',
|
||||
infoTotMeth: 'upTotMeth',
|
||||
infoTotMethNm: 'upTotMethNm',
|
||||
infoEqpmGrpId: 'eqpmGrpId',
|
||||
infoEqpmKindId: 'eqpmKindId',
|
||||
},
|
||||
},
|
||||
eqpmKindList: [],
|
||||
eqpmGrpList: [],
|
||||
addCheck: false,
|
||||
targetElem: '',
|
||||
gridColumn: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
selectedCommCd() {
|
||||
return this.pageData[this.gridName].data;
|
||||
},
|
||||
effcKind() {
|
||||
return this.pageData.effcKind;
|
||||
},
|
||||
infoPysclQtyId() {
|
||||
return this.pageData.infoPysclQtyId;
|
||||
},
|
||||
infoPysclQtyCd() {
|
||||
return this.pageData.infoPysclQtyCd;
|
||||
},
|
||||
infoPysclQtyNm() {
|
||||
return this.pageData.infoPysclQtyNm;
|
||||
},
|
||||
infoPysclQtyTpNm() {
|
||||
return this.pageData.infoPysclQtyTpNm;
|
||||
},
|
||||
infoGdIdxId() {
|
||||
return this.pageData.infoGdIdxId;
|
||||
},
|
||||
infoGdIdxNm() {
|
||||
return this.pageData.infoGdIdxNm;
|
||||
},
|
||||
infoTotMeth() {
|
||||
return this.pageData.infoTotMeth;
|
||||
},
|
||||
infoEqpmGrpId() {
|
||||
return this.pageData.infoEqpmGrpId;
|
||||
},
|
||||
infoEqpmKindId() {
|
||||
return this.pageData.infoEqpmKindId;
|
||||
},
|
||||
infoTotMethNm() {
|
||||
return this.pageData.infoTotMethNm;
|
||||
},
|
||||
initFlag() {
|
||||
if (this.eqpmKindList.length > 0 && this.eqpmGrpList.length > 0) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
targetElemDialog() {
|
||||
return this.targetElem.dialog;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
effcKind(val) {
|
||||
this.selectValue01 = val;
|
||||
// this.gridInit();
|
||||
},
|
||||
innerTabGridInfo(val) {
|
||||
if (val.tab == 1) {
|
||||
// this.gridInit();
|
||||
this.getRowGridData();
|
||||
}
|
||||
},
|
||||
infoPysclQtyId(val) {
|
||||
// console.log("@@ : ", val)
|
||||
const dt = {
|
||||
columnName: 'pysclQtyId',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].getData().filter(item => {
|
||||
if (item.pysclQtyId == val && item.pysclQtyId != '') {
|
||||
alert('중복되는 물리량 입니다');
|
||||
this.$refs[this.gridName].removeRow();
|
||||
}
|
||||
});
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoPysclQtyCd(val) {
|
||||
const dt = {
|
||||
columnName: 'pysclQtyCd',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoPysclQtyNm(val) {
|
||||
const dt = {
|
||||
columnName: 'pysclQtyNm',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoPysclQtyTpNm(val) {
|
||||
const dt = {
|
||||
columnName: 'pysclQtyTpNm',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoGdIdxId(val) {
|
||||
this.$refs[this.gridName].getData().filter(item => {
|
||||
if (item.gdIdxId == val && item.gdIdxId != '') {
|
||||
alert('중복되는 가이드지표 입니다');
|
||||
this.$refs[this.gridName].removeRow();
|
||||
}
|
||||
});
|
||||
const dt = {
|
||||
columnName: 'gdIdxId',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoGdIdxNm(val) {
|
||||
const dt = {
|
||||
columnName: 'gdIdxNm',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoTotMeth(val) {
|
||||
const dt = {
|
||||
columnName: 'totMeth',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoTotMethNm(val) {
|
||||
const dt = {
|
||||
columnName: 'totMethNm',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoEqpmGrpId(val) {
|
||||
const dt = {
|
||||
columnName: 'eqpmGrpId',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
infoEqpmKindId(val) {
|
||||
const dt = {
|
||||
columnName: 'eqpmKindId',
|
||||
value: val,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(dt);
|
||||
},
|
||||
async initFlag(val) {
|
||||
if (val) {
|
||||
await this.init();
|
||||
}
|
||||
},
|
||||
targetElemDialog(val) {
|
||||
if (!val) {
|
||||
if (this.$refs[this.gridName] != undefined) {
|
||||
//탭 처음 열릴때 오류 방지
|
||||
var gridData = this.$refs[this.gridName].getData();
|
||||
if (
|
||||
gridData[gridData.length - 1].gdIdxId == '' &&
|
||||
this.targetElem.myModalKey == 'gdIdxPop'
|
||||
) {
|
||||
this.$refs[this.gridName].removeRow();
|
||||
} else if (
|
||||
gridData[gridData.length - 1].pysclQtyId == '' &&
|
||||
this.targetElem.myModalKey == 'egrpPysclQtyPop'
|
||||
) {
|
||||
this.$refs[this.gridName].removeRow();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.eqpmKindList = await this.postApiReturn({
|
||||
apiKey: 'selectEmsEqpmKindList',
|
||||
resKey: 'eqpmGrpPysclQtyMngData',
|
||||
sendParam: {},
|
||||
});
|
||||
this.eqpmGrpList = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmGrp',
|
||||
resKey: 'eqpmGrpData',
|
||||
sendParam: {},
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
// this.init();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setGridData: 'setGridData',
|
||||
setGridColumn: 'setGridColumn',
|
||||
setGridOption: 'setGridOption',
|
||||
setGridSelectData: 'setGridSelectData',
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
}),
|
||||
async init() {
|
||||
await this.setSelectValueList01();
|
||||
await this.gridInit();
|
||||
},
|
||||
search() {},
|
||||
async setSelectValueList01() {
|
||||
this.selectValueList01 = [
|
||||
{
|
||||
text: '물리량',
|
||||
value: 'PYSCL',
|
||||
},
|
||||
{
|
||||
text: '가이드지표',
|
||||
value: 'GD_IDX',
|
||||
},
|
||||
];
|
||||
|
||||
this.selectValue01 = this.pageData.effcKind;
|
||||
},
|
||||
async gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
|
||||
// this.loadGrid = false;
|
||||
|
||||
const myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
// bodyHeight: gridHeight,
|
||||
// minBodyHeight: gridHeight,
|
||||
// header: {
|
||||
// height: 28,
|
||||
// },
|
||||
// rowHeight: 29,
|
||||
// minRowHeight: 29,
|
||||
// selectionUnit: 'row',
|
||||
// editingEvent: 'click',
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
|
||||
const _this = this;
|
||||
let useFgSelectList = [];
|
||||
let myColumns = [
|
||||
{
|
||||
header: '대상설비종류',
|
||||
name: 'eqpmKindId',
|
||||
formatter({ value }) {
|
||||
var retVal = '';
|
||||
const newValue = _this.eqpmKindList.filter(
|
||||
item => item.eqpmKindId == value,
|
||||
);
|
||||
if (newValue.length > 0) {
|
||||
retVal = newValue[0].eqpmKindNm;
|
||||
}
|
||||
return retVal;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '대상설비그룹',
|
||||
name: 'eqpmGrpId',
|
||||
formatter({ value }) {
|
||||
var retVal = '';
|
||||
const newValue = _this.eqpmGrpList.filter(
|
||||
item => item.eqpmGrpId == value,
|
||||
);
|
||||
if (newValue.length > 0) {
|
||||
retVal = newValue[0].eqpmGrpNm;
|
||||
}
|
||||
return retVal;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '물리량ID',
|
||||
name: 'pysclQtyId',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
hidden: true,
|
||||
},
|
||||
{ header: '물리량', name: 'pysclQtyCd', hidden: true, minWidth: 200 },
|
||||
{ header: '물리량명', name: 'pysclQtyNm', hidden: true },
|
||||
{ header: '물리량타입', name: 'pysclQtyTpNm', hidden: true },
|
||||
{ header: '가이드지표', name: 'gdIdxId', hidden: true },
|
||||
{ header: '가이드지표명', name: 'gdIdxNm', hidden: true },
|
||||
{ header: '집계방법', name: 'totMeth', hidden: true },
|
||||
{ header: '집계방법', name: 'totMethNm', align: 'center' },
|
||||
];
|
||||
|
||||
if (this.selectValue01 == 'PYSCL') {
|
||||
myColumns[2].hidden = false;
|
||||
myColumns[3].hidden = false;
|
||||
myColumns[4].hidden = false;
|
||||
myColumns[5].hidden = false;
|
||||
myColumns[6].hidden = true;
|
||||
myColumns[7].hidden = true;
|
||||
this.targetElem = this.$refs.EgrpPysclQtyPop;
|
||||
} else {
|
||||
this.targetElem = this.$refs.GdIdxPop;
|
||||
myColumns[2].hidden = true;
|
||||
myColumns[3].hidden = true;
|
||||
myColumns[4].hidden = true;
|
||||
myColumns[5].hidden = true;
|
||||
myColumns[6].hidden = false;
|
||||
myColumns[7].hidden = false;
|
||||
}
|
||||
this.gridColumn = myColumns;
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
await this.getRowGridData();
|
||||
// this.$nextTick(() => {
|
||||
// this.loadGrid = true;
|
||||
// });
|
||||
},
|
||||
async getRowGridData() {
|
||||
var myColumns = this.gridColumn;
|
||||
this.loadGrid = false;
|
||||
var apiKey =
|
||||
this.selectValue01 == 'PYSCL' ? 'selectPysclList' : 'selectGdiList';
|
||||
|
||||
if (this.selectValue01 == 'PYSCL') {
|
||||
myColumns[2].hidden = false;
|
||||
myColumns[3].hidden = false;
|
||||
myColumns[4].hidden = false;
|
||||
myColumns[5].hidden = false;
|
||||
myColumns[6].hidden = true;
|
||||
myColumns[7].hidden = true;
|
||||
this.targetElem = this.$refs.EgrpPysclQtyPop;
|
||||
} else {
|
||||
this.targetElem = this.$refs.GdIdxPop;
|
||||
myColumns[2].hidden = true;
|
||||
myColumns[3].hidden = true;
|
||||
myColumns[4].hidden = true;
|
||||
myColumns[5].hidden = true;
|
||||
myColumns[6].hidden = false;
|
||||
myColumns[7].hidden = false;
|
||||
}
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
var res = await this.postApiReturn({
|
||||
apiKey: apiKey,
|
||||
resKey: 'effcIdxInfoData',
|
||||
sendParam: {
|
||||
effcIdxId: this.pageData.effcIdxId,
|
||||
},
|
||||
});
|
||||
|
||||
var newRes = [];
|
||||
if (res.length > 0) {
|
||||
newRes = res.map(item => {
|
||||
return {
|
||||
...item,
|
||||
rowStat: null,
|
||||
};
|
||||
});
|
||||
}
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
// this.$nextTick(() => {
|
||||
this.loadGrid = true;
|
||||
// });
|
||||
},
|
||||
async getRowData(data) {
|
||||
if (this.addCheck) {
|
||||
this.setPageData({
|
||||
infoPysclQtyId: data.pysclQtyId,
|
||||
infoPysclQtyCd: data.pysclQtyCd,
|
||||
infoPysclQtyNm: data.pysclQtyNm,
|
||||
infoPysclQtyTpNm: data.pysclQtyTpNm,
|
||||
infoGdIdxId: data.gdIdxId,
|
||||
infoGdIdxNm: data.gdIdxNm,
|
||||
infoTotMeth: data.totMeth,
|
||||
infoEqpmGrpId: data.eqpmGrpId,
|
||||
infoEqpmKindId: data.eqpmKindId,
|
||||
});
|
||||
this.addCheck = false;
|
||||
}
|
||||
},
|
||||
async btnActions(action) {
|
||||
let dataArr = [];
|
||||
switch (action) {
|
||||
case 'add':
|
||||
var defaultRow = {
|
||||
eqpmKindId: '',
|
||||
eqpmGrpId: '',
|
||||
pysclQtyId: '',
|
||||
pysclQtyCd: '',
|
||||
pysclQtyNm: '',
|
||||
pysclQtyTpNm: '',
|
||||
upTotMeth: null,
|
||||
gdIdxId: '',
|
||||
gdidxNm: '',
|
||||
rowStat: null,
|
||||
};
|
||||
if (this.targetElem.myModalKey == 'gdIdxPop') {
|
||||
this.GdIdxPopItem['dataList'] = this.$refs[this.gridName]
|
||||
.getData()
|
||||
.map(item => {
|
||||
return item.gdIdxId;
|
||||
});
|
||||
} else if (this.targetElem.myModalKey == 'egrpPysclQtyPop') {
|
||||
this.EgrpPysclQtyPopItem['dataList'] = this.$refs[this.gridName]
|
||||
.getData()
|
||||
.map(item => {
|
||||
return item.pysclQtyId;
|
||||
});
|
||||
}
|
||||
this.$refs[this.gridName].addRow(defaultRow);
|
||||
this.addCheck = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs[this.gridName].focus({
|
||||
rowKey: this.$refs[this.gridName].getData().length - 1,
|
||||
setScroll: true,
|
||||
});
|
||||
});
|
||||
// var targetElem;
|
||||
// if(this.selectValue01 == 'PYSCL'){
|
||||
// targetElem = this.$refs.EgrpPysclQtyPop;
|
||||
// }else{
|
||||
// targetElem = this.$refs.GdIdxPop;
|
||||
// }
|
||||
|
||||
this.targetElem.dialogOpenCloseEvent(this.targetElem.dialog);
|
||||
break;
|
||||
|
||||
case 'remove':
|
||||
this.$refs[this.gridName].removeRow();
|
||||
break;
|
||||
|
||||
case 'save':
|
||||
// this.loadGrid = false;
|
||||
dataArr = this.$refs[this.gridName].save();
|
||||
|
||||
if (dataArr.length > 0) {
|
||||
const sendParam = {
|
||||
datas: {
|
||||
dsArg: dataArr.map(item => ({
|
||||
...item,
|
||||
useFg: item.useFg === true ? '1' : '0',
|
||||
effcIdxId: this.pageData.effcIdxId,
|
||||
})),
|
||||
},
|
||||
params: {},
|
||||
};
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'saveArgList',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
// this.setPageData({ isFind: true });
|
||||
this.setPageData({
|
||||
tabSaveCheck: true,
|
||||
});
|
||||
await this.getRowGridData();
|
||||
// this.loadGrid = true;
|
||||
} else {
|
||||
alert('저장할 내용이 없습니다.');
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
gridEditingFinish(data) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user