564 lines
14 KiB
Vue
564 lines
14 KiB
Vue
<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>
|