Files
sk_fems_ui/components/pages/ems/ReadPlcInfo/ReadPlcAddInfoTab.vue
2025-07-22 09:58:38 +07:00

386 lines
9.1 KiB
Vue

<template>
<div>
<div
class="d-flex justify-space-between"
>
<v-card-title class="px-0 pt-0 custom-title-4">검침개소 추가 정보</v-card-title>
<Buttons
:parentPrgmId="parentPrgmId"
:bindingData="gridName"
:btnActionsFnc="btnActions"
/>
</div>
<div ref="gridParent">
<Grid
:ref="gridName"
:gridName="gridName"
:parentPrgmId="parentPrgmId"
:editorGrid="true"
:innerTabGridInfo="innerTabGridInfo"
@getRowsData="getRowData"
:dataPath="addInfoTabData"
/>
</div>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Buttons from '~/components/common/button/Buttons';
import Grid from '~/components/common/Grid';
import InputText from '~/components/common/input/InputText';
import Form from '~/components/common/form/Form';
import mixinGlobal from '@/mixin/global.js';
import { NewCustomRenderer } from '~/plugins/gridUtility';
import { NewCustomEditor } from '~/plugins/gridUtility';
export default {
mixins: [mixinGlobal],
components: {
Buttons,
Grid,
InputText,
Form,
},
props: {
parentPrgmId: {
type: String,
require: true,
},
innerTabGridInfo: {
type: Object,
default: null,
},
},
data() {
return {
loadGrid: true,
gridName: 'rowDetailGrid',
rowKey: null,
edtingFinishFlag: 'Y',
addInfoTabData: {
"rowDetailGrid": {
data: [
{
readPlcNm: '서울 본사',
plcKind: '전기',
useFg: '1',
},
],
column: [
// { header: '회사 ID', name: 'comId', hidden: true },
{
header: '검침개소명',
name: 'readPlcNm',
align: 'left',
minWidth: 400,
},
{
header: '개소 종류',
name: 'plcKind',
minWidth: 100,
align: 'center',
// formatter({ value }) {
// let retVal = '';
// const newValue = _this.pageData.plcKindList.filter(
// item => item.commCd == value,
// );
// if (newValue.length > 0) {
// retVal = newValue[0].commCdNm;
// }
// return retVal;
// },
},
{
header: '사용 여부',
name: 'useFg',
minWidth: 100,
align: 'center',
// formatter({ value }) {
// value = value === true ? '1' : '0';
// const newValue = _this.pageData.useFgList.filter(
// item => item.commCd == value,
// );
// return newValue[0].commCdNm;
// },
},
]
}
}
};
},
computed: {
...mapState({
pageData(state) {
return state.pageData[this.parentPrgmId];
},
}),
selectedCommCd() {
return this.pageData[this.gridName].data;
},
myUseFgList() {
return this.pageData.useFgList;
},
selectedComId() {
return this.pageData.rowGridSelectData.comId;
},
selectedBlocId() {
return this.pageData.rowGridSelectData.blocId;
},
selectedReadPlcId() {
return this.pageData.rowGridSelectData.readPlcId;
},
},
mounted() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setGridData: 'setGridData',
setGridColumn: 'setGridColumn',
setGridOption: 'setGridOption',
}),
...mapActions({
postApi: 'modules/list/postApi',
postUpdateApi: 'modules/list/postUpdateApi',
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
chkOpenTabList: 'chkOpenTabList',
}),
init() {
this.gridInit();
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
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: myOptions,
});
// const _this = this;
// let useFgSelectList = [];
// this.pageData.useFgList.forEach(item => {
// const it = { text: item.commCdNm, value: item.commCd };
// useFgSelectList.push(it);
// });
// let addInfoList = [];
// this.pageData.addInfoList.forEach(item => {
// const it = { text: item.addInfoNm, value: item.addInfoId };
// addInfoList.push(it);
// });
// let addInfoDataKindList = [];
// this.pageData.addInfoDataKindList.forEach(item => {
// const it = { text: item.commCdNm, value: item.commCd };
// addInfoDataKindList.push(it);
// });
// const myColumns = [
// { header: '회사 ID', name: 'comId', hidden: true },
// { header: '검침개소 번호', name: 'readPlcId', hidden: true },
// {
// header: '추가 정보',
// name: 'addInfoId',
// align: 'left',
// formatter({ value }) {
// let retVal = '';
// const newValue = addInfoList.filter(item => item.value == value);
// if (newValue.length > 0) {
// retVal = newValue[0].text;
// }
// return retVal;
// },
// },
// {
// header: 'Data 구분',
// name: 'addInfoDataKind',
// align: 'center',
// formatter({ value }) {
// let retVal = '';
// const newValue = addInfoDataKindList.filter(
// item => item.value == value,
// );
// if (newValue.length > 0) {
// retVal = newValue[0].text;
// }
// return retVal;
// },
// // editor: {
// // type: "select",
// // options: {
// // listItems: addInfoDataKindList
// // }
// // }
// },
// {
// header: '숫자 값',
// name: 'addInfoNumVal',
// align: 'right',
// editor: 'text',
// hidden: true,
// },
// {
// header: '문자 값',
// name: 'addInfoTxtVal',
// align: 'left',
// editor: 'text',
// hidden: true,
// },
// {
// header: '추가 정보 값',
// name: 'addInfoVal',
// align: 'center',
// renderer: {
// type: NewCustomRenderer,
// },
// editor: {
// type: NewCustomEditor,
// },
// formatter(data) {
// return data.row.addInfoDataKind;
// },
// },
//{ header: "추가 정보 값", name: "addInfoVal", align: "center" , editor: "text",
// formatter({ value, row , column}) {
// console.log("addInfoVal row : ", row);
// console.log("addInfoVal state : ", column);
// if(row.addInfoDataKind === "NUM"){
// column.align = "right";
// }else{
// column.align = "left";
// }
// return value;
// }
//},
/*{
header: "사용여부",
name: "useFg",
align: "center",
formatter({ value }) {
return value == "1" ? "사용" : "사용안함";
},
editor: {
type: "select",
options: {
// listItems: useFgSelectList
listItems: [
{text:"사용", value:"1"},
{text:"사용안함", value:"0"},
]
}
}
},*/
// { header: '등록 사용자', name: 'regUserNo', hidden: true },
// { header: '등록 일자', name: 'regDttm', hidden: true },
// { header: '수정 사용자', name: 'procUserNo', hidden: true },
// { header: '수정 일자', name: 'procDttm', hidden: true },
// ];
// this.setGridColumn({
// gridKey: this.gridName,
// value: myColumns,
// });
this.loadGrid = true;
},
async getRowData2(data, gridName) {
this.setGridSelectData({
gridKey: gridName,
gridSelect: true,
rowGridSelectKey: data.rowKey,
rowGridSelectData: Object.assign({}, data),
});
},
async btnActions(action) {
let dataArr = [];
switch (action) {
case 'add':
this.$refs[this.gridName].addRow();
this.edtingFinishFlag = 'Y';
break;
case 'remove':
this.$refs[this.gridName].removeRow();
this.edtingFinishFlag = 'N';
break;
case 'save':
if (this.edtingFinishFlag == 'Y') {
await this.$refs[this.gridName].editingFinish({
rowKey: this.rowKey,
});
}
this.loadGrid = false;
dataArr = this.$refs[this.gridName].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;
}
}
if (dataArr.length > 0) {
const sendParam = {
datas: {
dsReadPlcAddInfo: dataArr.map(item => ({
...item,
comId: this.selectedComId,
blocId: this.selectedBlocId,
readPlcId: this.selectedReadPlcId,
})),
},
params: {},
};
await this.postUpdateApi({
apiKey: 'saveReadPlcAddInfoList',
sendParam: sendParam,
});
this.loadGrid = true;
this.setPageData({ isFind: true });
this.edtingFinishFlag = 'Y';
} else {
this.loadGrid = true;
alert('저장할 내용이 없습니다.');
}
break;
default:
break;
}
},
async getRowData(data) {
this.rowKey = data.rowKey;
this.edtingFinishFlag = 'Y';
},
gridEditingFinish2(data, bindingData) {
this.$refs[bindingData].editingFinish(data);
},
search() {},
},
};
</script>