sk_fems_ui commit
This commit is contained in:
unknown
106
components/common/select/SelectAddGrp.vue
Normal file
106
components/common/select/SelectAddGrp.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<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="'#fb8200'" class="mr-1" -->
|
||||
<v-icon x-small :color="'#4777d9'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="addGrpNm"
|
||||
item-value="addGrpId"
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.autoLoad)
|
||||
this.getAddGrpInfoList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.sendParam,
|
||||
addAll: this.addAll,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getAddGrpInfoList: 'modules/search/getAddGrpInfoList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
104
components/common/select/SelectBlocMstr.vue
Normal file
104
components/common/select/SelectBlocMstr.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].blocMstrList"
|
||||
label="사업장을 선택하세요"
|
||||
item-text="blocNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
outlined
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '사업장',
|
||||
labelPrepend: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
if (!this.dataKey) {
|
||||
return this.searchParam[this.parentPrgmId].blocId;
|
||||
} else {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
if (!this.dataKey) {
|
||||
return this.setPageData({ blocId: value });
|
||||
} else {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getBlocMstrList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.sendParam,
|
||||
addAll: this.addAll,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getBlocMstrList: 'modules/search/getBlocMstrList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
88
components/common/select/SelectBlocMstr2.vue
Normal file
88
components/common/select/SelectBlocMstr2.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<v-row class="search-box">
|
||||
<v-col v-if="label" cols="4">
|
||||
<label for="" class="search-box-label ">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? 7 : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].blocMstrList"
|
||||
label="사업장을 선택하세요"
|
||||
item-text="blocNm"
|
||||
item-value="blocId"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
1. item-value="idx" -> item-value="blocId"
|
||||
2. { blocMstrList: list, blocId: 0 } -> { blocMstrList: list, blocId: 0 },
|
||||
*/
|
||||
|
||||
import {
|
||||
state,
|
||||
dispatch,
|
||||
commit,
|
||||
mapState,
|
||||
mapMutations,
|
||||
mapActions,
|
||||
} from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
diffModel: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '사업장',
|
||||
labelPrepend: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
if (!this.diffModel) {
|
||||
return this.searchParam[this.parentPrgmId].blocId;
|
||||
} else {
|
||||
return this.searchParam[this.parentPrgmId][this.diffModel];
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
if (!this.diffModel) {
|
||||
return this.setPageData({ blocId: value });
|
||||
} else {
|
||||
return this.setPageData({ [this.diffModel]: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getBlocMstrList();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getBlocMstrList: 'modules/search/getBlocMstrList2',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
107
components/common/select/SelectBlocMstrForPop.vue
Normal file
107
components/common/select/SelectBlocMstrForPop.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].blocMstrList"
|
||||
label="사업장을 선택하세요"
|
||||
item-text="blocNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import SelectBlocMstrVue from './SelectBlocMstr.vue';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
diffModel: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '사업장',
|
||||
labelPrepend: true,
|
||||
// selectValue: "BL0001"
|
||||
// selectValue: selectValue !==undefined ? selectValue : "BL0001"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
if (!this.diffModel) {
|
||||
return this.searchParam[this.parentPrgmId].blocId;
|
||||
} else {
|
||||
return this.searchParam[this.parentPrgmId][this.diffModel];
|
||||
}
|
||||
|
||||
// return this.searchParam[this.parentPrgmId].blocId;
|
||||
},
|
||||
set(value) {
|
||||
if (!this.diffModel) {
|
||||
this.selectBoxEvt();
|
||||
return this.setPageData({ blocId: value });
|
||||
} else {
|
||||
return this.setPageData({ [this.diffModel]: value });
|
||||
}
|
||||
|
||||
// return this.setPageData({ blocId: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getBlocMstrList();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getBlocMstrList: 'modules/search/getBlocMstrListForPop',
|
||||
}),
|
||||
selectBoxEvt() {
|
||||
localStorage.removeItem(
|
||||
this.searchParam[this.parentPrgmId] + 'CheckedRow',
|
||||
);
|
||||
if (this.searchParam[this.parentPrgmId].isMulti) {
|
||||
this.setPageData({ facInfoList: [] });
|
||||
} else {
|
||||
this.setPageData({ facInfo: {} });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
115
components/common/select/SelectBox.vue
Normal file
115
components/common/select/SelectBox.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<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-select
|
||||
v-model="innerValue"
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: () => [],
|
||||
},
|
||||
propsValue: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: null,
|
||||
},
|
||||
required:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:true
|
||||
},
|
||||
disabled: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
readonly: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
innerValue: {
|
||||
get() {
|
||||
return this.propsValue;
|
||||
},
|
||||
set(value) {
|
||||
// console.log('value[setValue] : ', value)
|
||||
this.$emit('update:propsValue', value);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// console.log('created SelectBox')
|
||||
// console.log('itemList : ', this.itemList);
|
||||
// console.log('propsValue : ', this.propsValue);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
121
components/common/select/SelectBoxMulti.vue
Normal file
121
components/common/select/SelectBoxMulti.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<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-select
|
||||
v-model="innerValue"
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:multiple="multiple"
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: () => [],
|
||||
},
|
||||
propsValue: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: null,
|
||||
},
|
||||
required:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:true
|
||||
},
|
||||
disabled: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
readonly: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
multiple:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
innerValue: {
|
||||
get() {
|
||||
return this.propsValue;
|
||||
},
|
||||
set(value) {
|
||||
// console.log('value[setValue] : ', value)
|
||||
this.$emit('update:propsValue', value);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// console.log('created SelectBox')
|
||||
// console.log('itemList : ', this.itemList);
|
||||
// console.log('propsValue : ', this.propsValue);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
162
components/common/select/SelectBoxTime.vue
Normal file
162
components/common/select/SelectBoxTime.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<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 ? timeCols : ''">
|
||||
<v-select
|
||||
v-model="timeInnerValue"
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:menu-props="{auto:true, offsetY: true}"
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
:class="'v-select__custom'"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@click="setDatepickerHide"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
timeCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 1,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: () => [],
|
||||
},
|
||||
propsValue: {
|
||||
type: String,
|
||||
require: true,
|
||||
//데이터 형태: '00 : 00'
|
||||
},
|
||||
required:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:true
|
||||
},
|
||||
disabled: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
readonly: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
minInterval: {
|
||||
type:Number,
|
||||
require:false,
|
||||
default:1
|
||||
}
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
timeInnerValue: {
|
||||
get() {
|
||||
return this.propsValue;
|
||||
},
|
||||
set(value) {
|
||||
// console.log('value[setValue] : ', value)
|
||||
this.$emit('update:propsValue', value);
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTimeList();
|
||||
// console.log('created SelectBox')
|
||||
// console.log('timeList : ', this.timeList);
|
||||
// console.log('propsValue : ', this.propsValue);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
getTimeList(){
|
||||
for(var i=0; i<24; i++){
|
||||
let hour = i.toString().padStart(2, '0');
|
||||
for(var j=0; j<60; j++){
|
||||
if(j%this.minInterval===0){
|
||||
let min = j.toString().padStart(2, '0');
|
||||
this.itemList.push(
|
||||
{
|
||||
'text' : hour + ' : ' + min,
|
||||
'value': hour + ' : ' + min
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.propsValue = this.itemList[0].value;
|
||||
},
|
||||
setDatepickerHide(e){
|
||||
// datepicker 선택 중 시간 selectBox를 고를 경우 datepicker를 hidden 시키는 기능
|
||||
if(document.querySelector("#startpicker-container > div") != undefined){
|
||||
let datepicker1 = document.querySelector("#startpicker-container > div");
|
||||
datepicker1.classList.add('tui-hidden');
|
||||
}
|
||||
if(document.querySelector("#endpicker-container > div") != undefined){
|
||||
let datepicker2 = document.querySelector("#endpicker-container > div");
|
||||
datepicker2.classList.add('tui-hidden');
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .v-select__custom {
|
||||
// &.time {
|
||||
// width: calc(50%);
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
152
components/common/select/SelectCmCycle.vue
Normal file
152
components/common/select/SelectCmCycle.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].cmCycleList"
|
||||
label="주기를 선택하세요"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @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,
|
||||
},
|
||||
pickerMode: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
label:{
|
||||
type: String,
|
||||
require: false,
|
||||
default: '주기'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: '주기',
|
||||
labelPrepend: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ cmCycle: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectValue(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
|
||||
if(this.searchParam[this.parentPrgmId].dateInitedFlag){
|
||||
return;
|
||||
}
|
||||
const today = Utility.setFormatDate('today', 'YYYYMMDD');
|
||||
let srartDate = '';
|
||||
let endDate = '';
|
||||
// console.log(value);
|
||||
switch (value) {
|
||||
case 'CYC_YEAR':
|
||||
endDate = Utility.setFormatDate(today, 'YYYY');
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYY',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
endDate = Utility.setFormatDate(today, 'YYYYMM');
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMM',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
endDate = today;
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMMDD',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_HOUR':
|
||||
endDate = today;
|
||||
srartDate = today;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (
|
||||
this.pickerMode == undefined ||
|
||||
this.pickerMode == null ||
|
||||
this.pickerMode == ''
|
||||
) {
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
} else if (this.pickerMode == 'single') {
|
||||
this.setPageData({ fromDt: endDate, toDt: srartDate });
|
||||
} else {
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
}
|
||||
// console.log(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
// console.log(this.searchParam[this.parentPrgmId].dateRange);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
139
components/common/select/SelectCmCycle2.vue
Normal file
139
components/common/select/SelectCmCycle2.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].cmCycleList"
|
||||
label="주기를 선택하세요"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @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,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '주기',
|
||||
labelPrepend: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ cmCycle: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectValue(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
|
||||
const today = Utility.setFormatDate('today', 'YYYYMMDD');
|
||||
let srartDate = '';
|
||||
let endDate = '';
|
||||
// console.log(value);
|
||||
switch (value) {
|
||||
case 'CYC_YEAR':
|
||||
endDate = Utility.setFormatDate(today, 'YYYY');
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYY',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
endDate = Utility.setFormatDate(today, 'YYYYMM');
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMM',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_WEEK':
|
||||
endDate = today;
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMMDD',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
endDate = today;
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMMDD',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_HOUR':
|
||||
endDate = today;
|
||||
srartDate = today;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
// console.log(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
// console.log(this.searchParam[this.parentPrgmId].dateRange);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
96
components/common/select/SelectCommEng.vue
Normal file
96
components/common/select/SelectCommEng.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].commEngList"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
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: 5,
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].commEngCd;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ commEngCd: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
commGrpCd: 'CM_MTTTP',
|
||||
useFg: '1',
|
||||
};
|
||||
this.getCommEngList(params);
|
||||
if (this.addAll) {
|
||||
this.getCommEngList.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '전체',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getCommEngList: 'modules/search/getCommEngList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
115
components/common/select/SelectCompKind.vue
Normal file
115
components/common/select/SelectCompKind.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].compKindCdList"
|
||||
item-text="commCdNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '비교 연산자',
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].compKindCd;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ compKindCd: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (this.autoLoad) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async initData() {
|
||||
var compKindCdList = await this.postApiReturn({
|
||||
apiKey: 'selectCommCd',
|
||||
resKey: 'commCdData',
|
||||
sendParam: {
|
||||
commGrpCd: 'BM_SVCT_OPERATOR',
|
||||
},
|
||||
});
|
||||
if (this.addAll) {
|
||||
compKindCdList.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '전체',
|
||||
});
|
||||
}
|
||||
|
||||
var tempIdx = 0;
|
||||
compKindCdList.map(item => {
|
||||
item.idx = tempIdx++;
|
||||
});
|
||||
|
||||
this.setPageData({ compKindCd: 0, compKindCdList: compKindCdList });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
275
components/common/select/SelectDate.vue
Normal file
275
components/common/select/SelectDate.vue
Normal file
@ -0,0 +1,275 @@
|
||||
<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-row>
|
||||
<v-col>
|
||||
<v-menu
|
||||
ref="fromMenu"
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
:nudge-right="40"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="auto"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="fromDtValue"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
ref="fromPicker"
|
||||
:type="pickerType"
|
||||
no-title
|
||||
v-model="fromDtValue"
|
||||
:max="maxDate"
|
||||
@input="menu = false"
|
||||
@click:year="saveFromDt"
|
||||
></v-date-picker>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
<v-col :cols="1"></v-col>
|
||||
<v-col>
|
||||
<v-menu
|
||||
ref="toMenu"
|
||||
v-model="menu2"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="auto"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="toDtValue"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
ref="toPicker"
|
||||
:type="pickerType"
|
||||
no-title
|
||||
v-model="toDtValue"
|
||||
:max="maxDate"
|
||||
@input="menu2 = false"
|
||||
@click:year="saveToDt"
|
||||
></v-date-picker>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</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,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '조회기간',
|
||||
labelPrepend: true,
|
||||
|
||||
menu: false,
|
||||
menu2: false,
|
||||
modal: false,
|
||||
startDateMenu: false,
|
||||
endDateMenu: false,
|
||||
YEAR: 'MONTH',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
myCmCycle() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
dateFormatTypeGet() {
|
||||
return this.myCmCycle == 'CYC_YEAR' ? 'YYYY' : 'YYYY-MM';
|
||||
},
|
||||
dateFormatTypeSet() {
|
||||
return this.myCmCycle == 'CYC_YEAR' ? 'YYYY' : 'YYYYMM';
|
||||
},
|
||||
maxDate() {
|
||||
return Utility.setFormatDate('today', this.dateFormatTypeGet);
|
||||
},
|
||||
pickerType() {
|
||||
return this.myCmCycle == 'CYC_YEAR' ? 'year' : 'month';
|
||||
},
|
||||
fromDtValue: {
|
||||
get() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam[this.parentPrgmId].fromDt,
|
||||
this.dateFormatTypeGet,
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({
|
||||
fromDt: Utility.setFormatDate(value, this.dateFormatTypeSet),
|
||||
});
|
||||
},
|
||||
},
|
||||
toDtValue: {
|
||||
get() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam[this.parentPrgmId].toDt,
|
||||
this.dateFormatTypeGet,
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({
|
||||
toDt: Utility.setFormatDate(value, this.dateFormatTypeSet),
|
||||
});
|
||||
},
|
||||
},
|
||||
defaultRange() {
|
||||
return this.searchParam[this.parentPrgmId].defaultRange[this.myCmCycle];
|
||||
},
|
||||
isRange() {
|
||||
return this.defaultRange !== null && this.defaultRange > 0;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
fromDtValue(newVal, oldVal) {
|
||||
if (this.isRange && newVal !== 'Invalid Date' && newVal !== oldVal) {
|
||||
this.toDtValueChkRang(newVal);
|
||||
} else {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
toDtValue(newVal, oldVal) {
|
||||
if (this.isRange && newVal !== 'Invalid Date' && newVal !== oldVal) {
|
||||
this.fromDtValueChkRang(newVal);
|
||||
}
|
||||
},
|
||||
menu(val) {
|
||||
if (val && this.myCmCycle == 'CYC_YEAR') {
|
||||
this.$nextTick(() => (this.$refs.fromPicker.activePicker = 'YEAR'));
|
||||
}
|
||||
},
|
||||
menu2(val) {
|
||||
if (val && this.myCmCycle == 'CYC_YEAR') {
|
||||
this.$nextTick(() => (this.$refs.toPicker.activePicker = 'YEAR'));
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
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.dateFormatTypeSet) ===
|
||||
compareDt.format(this.dateFormatTypeSet)
|
||||
) {
|
||||
// console.log("fromDtValueChkRang::통과");
|
||||
this.setPageData({ isFind: true });
|
||||
} else {
|
||||
this.setPageData({
|
||||
fromDt: Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
compareDt,
|
||||
this.dateFormatTypeSet,
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
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.dateFormatTypeSet) ===
|
||||
compareDt.format(this.dateFormatTypeSet)
|
||||
) {
|
||||
// console.log("toDtValueChkRang::통과");
|
||||
this.setPageData({ isFind: true });
|
||||
} else {
|
||||
this.setPageData({
|
||||
toDt: Utility.setAftertDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
compareDt,
|
||||
this.dateFormatTypeSet,
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
saveFromDt(date) {
|
||||
if (this.myCmCycle == 'CYC_YEAR') {
|
||||
this.$refs.fromPicker.activePicker = 'YEAR';
|
||||
this.setPageData({ fromDt: date + '' });
|
||||
this.menu = false;
|
||||
}
|
||||
},
|
||||
saveToDt(date) {
|
||||
if (this.myCmCycle == 'CYC_YEAR') {
|
||||
this.$refs.toPicker.activePicker = 'YEAR';
|
||||
this.setPageData({ toDt: date + '' });
|
||||
this.menu2 = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.v-text-field__details {
|
||||
display: none;
|
||||
}
|
||||
.v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
150
components/common/select/SelectDateSolo.vue
Normal file
150
components/common/select/SelectDateSolo.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<v-row class="search-box">
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label ft-size_14 ft-clr_g-c">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<!-- <DatePicker /> -->
|
||||
<v-menu
|
||||
ref="fromMenu"
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
:nudge-right="40"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="auto"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="fromDtValue"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
ref="fromPicker"
|
||||
type="month"
|
||||
no-title
|
||||
v-model="fromDtValue"
|
||||
:max="maxDate"
|
||||
@input="menu = false"
|
||||
@click:year="saveFromDt"
|
||||
></v-date-picker>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import DatePicker from '~/components/common/Datepicker';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DatePicker,
|
||||
},
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '조회연월',
|
||||
labelPrepend: true,
|
||||
|
||||
menu: false,
|
||||
modal: false,
|
||||
startDateMenu: false,
|
||||
YEAR: 'MONTH',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
myCmCycle() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
dateFormatTypeGet() {
|
||||
return this.myCmCycle == 'CYC_YEAR' ? 'YYYY' : 'YYYY-MM';
|
||||
},
|
||||
dateFormatTypeSet() {
|
||||
return this.myCmCycle == 'CYC_YEAR' ? 'YYYY' : 'YYYY-MM';
|
||||
},
|
||||
maxDate() {
|
||||
return Utility.setFormatDate('today', this.dateFormatTypeGet);
|
||||
},
|
||||
pickerType() {
|
||||
return this.myCmCycle == 'CYC_YEAR' ? 'year' : 'month';
|
||||
},
|
||||
fromDtValue: {
|
||||
get() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam[this.parentPrgmId].fromDt,
|
||||
this.dateFormatTypeGet,
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({
|
||||
fromDt: Utility.setFormatDate(value, this.dateFormatTypeSet),
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
fromDtValue(val) {
|
||||
if (val) {
|
||||
// alert(val);
|
||||
// this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
menu(val) {
|
||||
if (val && this.myCmCycle == 'CYC_YEAR') {
|
||||
this.$nextTick(() => (this.$refs.fromPicker.activePicker = 'YEAR'));
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
saveFromDt(date) {
|
||||
if (this.myCmCycle == 'CYC_YEAR') {
|
||||
this.$refs.fromPicker.activePicker = 'YEAR';
|
||||
this.setPageData({ fromDt: date + '' });
|
||||
this.menu = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.v-text-field__details {
|
||||
display: none;
|
||||
}
|
||||
.v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
215
components/common/select/SelectDateVc.vue
Normal file
215
components/common/select/SelectDateVc.vue
Normal file
@ -0,0 +1,215 @@
|
||||
<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-row>
|
||||
<v-col class="pa-0">
|
||||
<vc-date-picker
|
||||
v-model="fromDtValue"
|
||||
:available-dates="myAvailableDates"
|
||||
is-required
|
||||
>
|
||||
<template v-slot="{ inputEvents }">
|
||||
<v-text-field
|
||||
readonly
|
||||
:value="fromDtValue"
|
||||
v-on="inputEvents"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</template>
|
||||
</vc-date-picker>
|
||||
</v-col>
|
||||
<template v-if="isRange">
|
||||
<v-col cols="1" class="pa-0"></v-col>
|
||||
<v-col class="pa-0">
|
||||
<vc-date-picker
|
||||
v-model="toDtValue"
|
||||
:available-dates="myAvailableDates"
|
||||
is-required
|
||||
>
|
||||
<template v-slot="{ inputEvents }">
|
||||
<v-text-field
|
||||
readonly
|
||||
:value="toDtValue"
|
||||
v-on="inputEvents"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</template>
|
||||
</vc-date-picker>
|
||||
</v-col>
|
||||
</template>
|
||||
</v-row>
|
||||
</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,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '조회기간',
|
||||
labelPrepend: true,
|
||||
myAvailableDates: {
|
||||
start: null,
|
||||
end: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
myCmCycle() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
defaultRange() {
|
||||
return this.searchParam[this.parentPrgmId].defaultRange[this.myCmCycle];
|
||||
},
|
||||
isRange() {
|
||||
return this.defaultRange !== null && this.defaultRange > 0;
|
||||
},
|
||||
fromDtValue: {
|
||||
get() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam[this.parentPrgmId].fromDt,
|
||||
'YYYY-MM-DD',
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({
|
||||
fromDt: Utility.setFormatDate(value, 'YYYYMMDD'),
|
||||
});
|
||||
},
|
||||
},
|
||||
toDtValue: {
|
||||
get() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam[this.parentPrgmId].toDt,
|
||||
'YYYY-MM-DD',
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({
|
||||
toDt: Utility.setFormatDate(value, 'YYYYMMDD'),
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
fromDtValue(newVal, oldVal) {
|
||||
if (this.isRange && newVal !== 'Invalid Date' && newVal !== oldVal) {
|
||||
this.toDtValueChkRang(newVal);
|
||||
} else {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
toDtValue(newVal, oldVal) {
|
||||
if (this.isRange && newVal !== 'Invalid Date' && newVal !== oldVal) {
|
||||
this.fromDtValueChkRang(newVal);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const today = Utility.setFormatDate('today', 'YYYY-MM-DD');
|
||||
this.myAvailableDates = {
|
||||
start: null,
|
||||
end: today,
|
||||
};
|
||||
},
|
||||
// async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
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('YYYYMMDD') === compareDt.format('YYYYMMDD')
|
||||
) {
|
||||
// console.log("통과");
|
||||
this.setPageData({ isFind: true });
|
||||
} else {
|
||||
this.setPageData({
|
||||
fromDt: Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
compareDt,
|
||||
'YYYYMMDD',
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
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('YYYYMMDD') === compareDt.format('YYYYMMDD')
|
||||
) {
|
||||
// console.log("통과");
|
||||
this.setPageData({ isFind: true });
|
||||
} else {
|
||||
this.setPageData({
|
||||
toDt: Utility.setAftertDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
compareDt,
|
||||
'YYYYMMDD',
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.v-text-field__details {
|
||||
display: none;
|
||||
}
|
||||
.v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
220
components/common/select/SelectDateVcTime.vue
Normal file
220
components/common/select/SelectDateVcTime.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<v-row class="search-box">
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-row>
|
||||
<v-col class="pa-0">
|
||||
<vc-date-picker
|
||||
v-model="fromDtValue"
|
||||
:available-dates="myAvailableDates"
|
||||
:timezone="fromTimezone"
|
||||
mode="dateTime"
|
||||
is24hr
|
||||
is-required
|
||||
>
|
||||
<template v-slot="{ inputEvents }">
|
||||
<v-text-field
|
||||
readonly
|
||||
:value="fromDtValue"
|
||||
v-on="inputEvents"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</template>
|
||||
</vc-date-picker>
|
||||
</v-col>
|
||||
<template v-if="isRange">
|
||||
<v-col cols="1" class="pa-0"></v-col>
|
||||
<v-col class="pa-0">
|
||||
<vc-date-picker
|
||||
v-model="toDtValue"
|
||||
:available-dates="myAvailableDates"
|
||||
:timezone="toTimezone"
|
||||
mode="dateTime"
|
||||
is24hr
|
||||
is-required
|
||||
>
|
||||
<template v-slot="{ inputEvents }">
|
||||
<v-text-field
|
||||
readonly
|
||||
:value="toDtValue"
|
||||
v-on="inputEvents"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</template>
|
||||
</vc-date-picker>
|
||||
</v-col>
|
||||
</template>
|
||||
</v-row>
|
||||
</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,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 3,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '조회기간',
|
||||
labelPrepend: true,
|
||||
today: new Date(),
|
||||
myAvailableDates: {
|
||||
start: null,
|
||||
end: null,
|
||||
},
|
||||
fromTimezone: '',
|
||||
toTimezone: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
myCmCycle() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
defaultRange() {
|
||||
return this.searchParam[this.parentPrgmId].defaultRange[this.myCmCycle];
|
||||
},
|
||||
isRange() {
|
||||
return (
|
||||
(this.defaultRange !== null && this.defaultRange > 0) ||
|
||||
this.defaultRange === 'no limite'
|
||||
);
|
||||
},
|
||||
fromDtValue: {
|
||||
get() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam[this.parentPrgmId].fromDt,
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({
|
||||
fromDt: Utility.setFormatDate(value, 'YYYY-MM-DD HH:mm') + ':00',
|
||||
});
|
||||
},
|
||||
},
|
||||
toDtValue: {
|
||||
get() {
|
||||
return Utility.setFormatDate(
|
||||
this.searchParam[this.parentPrgmId].toDt,
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({
|
||||
toDt: Utility.setFormatDate(value, 'YYYY-MM-DD HH:mm') + ':00',
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
fromDtValue(newVal, oldVal) {
|
||||
if (
|
||||
this.isRange &&
|
||||
this.defaultRange !== 'no limite' &&
|
||||
newVal !== 'Invalid Date' &&
|
||||
newVal !== oldVal
|
||||
) {
|
||||
this.toDtValueChkRang(newVal);
|
||||
}
|
||||
},
|
||||
toDtValue(newVal, oldVal) {
|
||||
if (
|
||||
this.isRange &&
|
||||
this.defaultRange !== 'no limite' &&
|
||||
newVal !== 'Invalid Date' &&
|
||||
newVal !== oldVal
|
||||
) {
|
||||
this.fromDtValueChkRang(newVal);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const today = Utility.setFormatDate('today', 'YYYY-MM-DD');
|
||||
this.myAvailableDates = {
|
||||
start: null,
|
||||
end: today,
|
||||
};
|
||||
this.setPageData({
|
||||
fromDt: today + ' 00:00:00',
|
||||
toDt: today + ' 23:59:59',
|
||||
});
|
||||
},
|
||||
// async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
fromDtValueChkRang(newDt) {
|
||||
const defaultDt = this.$dayjs(this.fromDtValue);
|
||||
const compareDt = this.$dayjs(newDt);
|
||||
const rangGap = compareDt.diff(defaultDt, 'hour');
|
||||
if (this.defaultRange > rangGap && rangGap > 0) {
|
||||
// console.log("통과");
|
||||
} else {
|
||||
this.setPageData({
|
||||
fromDt: Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
compareDt,
|
||||
'YYYY-MM-DD',
|
||||
'HH:mm:ss',
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
toDtValueChkRang(newDt) {
|
||||
const defaultDt = this.$dayjs(this.toDtValue);
|
||||
const compareDt = this.$dayjs(newDt);
|
||||
const rangGap = defaultDt.diff(compareDt, 'hour');
|
||||
|
||||
if (this.defaultRange > rangGap && rangGap > 0) {
|
||||
// console.log("통과");
|
||||
} else {
|
||||
this.setPageData({
|
||||
toDt: Utility.setAftertDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
compareDt,
|
||||
'YYYY-MM-DD',
|
||||
'HH:mm:ss',
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.v-text-field__details {
|
||||
display: none;
|
||||
}
|
||||
.v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
components/common/select/SelectDsEnrg.vue
Normal file
125
components/common/select/SelectDsEnrg.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="this.energyList"
|
||||
item-text="enrgNm"
|
||||
item-value="cd"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '검침대상유형',
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
enrgCd: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
energyList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.enrgCd];
|
||||
},
|
||||
set(value) {
|
||||
console.log('value : ', value);
|
||||
return this.setPageData({ [this.enrgCd]: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.energyList = [
|
||||
{
|
||||
cd: 'ROI000001',
|
||||
enrgNm: '전력',
|
||||
unit: 'kwh',
|
||||
enrgUnit: '008',
|
||||
readObjNm: '전력',
|
||||
enrgDiv: 'MTT_ELEC',
|
||||
ercCd: 'ERC000001',
|
||||
},
|
||||
{
|
||||
cd: 'ROI000002',
|
||||
enrgNm: '스팀',
|
||||
unit: '㎥',
|
||||
enrgUnit: '009',
|
||||
readObjNm: '스팀',
|
||||
enrgDiv: 'MTT_HEAT',
|
||||
ercCd: 'ERC000002',
|
||||
},
|
||||
{
|
||||
cd: 'ROI000072',
|
||||
enrgNm: '정수',
|
||||
unit: 'ton',
|
||||
enrgUnit: '003',
|
||||
readObjNm: '정수',
|
||||
enrgDiv: 'MTT_WTER',
|
||||
ercCd: 'ERC000005',
|
||||
},
|
||||
{
|
||||
cd: 'ROI000070',
|
||||
enrgNm: '여과수',
|
||||
unit: 'ton',
|
||||
enrgUnit: '003',
|
||||
readObjNm: '여과수',
|
||||
enrgDiv: 'MTT_WTER',
|
||||
ercCd: 'ERC000005',
|
||||
},
|
||||
];
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
121
components/common/select/SelectDtct.vue
Normal file
121
components/common/select/SelectDtct.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<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-select
|
||||
v-if="loadSelectBox"
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].dtctCdList"
|
||||
item-text="commCdNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '감시 시스템',
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 5,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadSelectBox: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].dtctCd;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ dtctCd: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (this.autoLoad) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async initData() {
|
||||
this.loadSelectBox = false;
|
||||
var dtctCdList = await this.postApiReturn({
|
||||
apiKey: 'selectCommCd',
|
||||
resKey: 'commCdData',
|
||||
sendParam: {
|
||||
commGrpCd: 'EM_SYS',
|
||||
useFg: '1',
|
||||
},
|
||||
});
|
||||
if (this.addAll) {
|
||||
dtctCdList.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '전체',
|
||||
});
|
||||
}
|
||||
|
||||
var tempIdx = 0;
|
||||
dtctCdList.map(item => {
|
||||
item.idx = tempIdx++;
|
||||
});
|
||||
|
||||
this.setPageData({ dtctCd: 0, dtctCdList: dtctCdList });
|
||||
this.loadSelectBox = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
88
components/common/select/SelectEnergy.vue
Normal file
88
components/common/select/SelectEnergy.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].energyList"
|
||||
item-text="enrgNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '검침대상유형',
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].energyCd;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ energyCd: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.autoLoad) {
|
||||
this.getEnergyList({ useFg: 1 });
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getEnergyList: 'modules/search/getEnergyList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
113
components/common/select/SelectEnergyForPop.vue
Normal file
113
components/common/select/SelectEnergyForPop.vue
Normal 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-select
|
||||
v-model="selectValue"
|
||||
:items="selectList"
|
||||
item-text="enrgNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '검침대상유형',
|
||||
},
|
||||
isAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].energyCd;
|
||||
},
|
||||
set(value) {
|
||||
this.selectBoxEvt();
|
||||
return this.setPageData({ energyCd: value });
|
||||
},
|
||||
},
|
||||
selectList() {
|
||||
let list = [];
|
||||
list = this.searchParam[this.parentPrgmId].energyList;
|
||||
if (this.isAll) {
|
||||
list.unshift({
|
||||
idx: -1,
|
||||
enrgNm: '전체',
|
||||
});
|
||||
}
|
||||
return list;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.autoLoad) this.getEnergyList({ useFg: 1 });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getEnergyList: 'modules/search/getEnergyListForPop',
|
||||
}),
|
||||
selectBoxEvt() {
|
||||
localStorage.removeItem(
|
||||
this.searchParam[this.parentPrgmId] + 'CheckedRow',
|
||||
);
|
||||
if (this.searchParam[this.parentPrgmId].isMulti) {
|
||||
this.setPageData({ facInfoList: [] });
|
||||
} else {
|
||||
this.setPageData({ facInfo: {} });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
102
components/common/select/SelectEqpmGrp.vue
Normal file
102
components/common/select/SelectEqpmGrp.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="eqpmGrpNm"
|
||||
item-value="eqpmGrpId"
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.autoLoad)
|
||||
this.getEqpmGrpList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.sendParam,
|
||||
addAll: this.addAll,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getEqpmGrpList: 'modules/search/getEqpmGrpList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
95
components/common/select/SelectEqpmGrpKind.vue
Normal file
95
components/common/select/SelectEqpmGrpKind.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="selectList"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
diffModel: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '설비그룹종류',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
if (!this.diffModel) {
|
||||
return this.searchParam[this.parentPrgmId].eqpmGrpKind;
|
||||
} else {
|
||||
return this.searchParam[this.parentPrgmId][this.diffModel];
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
if (!this.diffModel) {
|
||||
return this.setPageData({ eqpmGrpKind: value });
|
||||
} else {
|
||||
return this.setPageData({ [this.diffModel]: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
selectList() {
|
||||
let list = this.searchParam[this.parentPrgmId].eqpmGrpKindList;
|
||||
return list;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
commGrpCd: 'CM_EQKIND',
|
||||
useFg: '1',
|
||||
};
|
||||
this.getEqpmGrpKindList(params);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getEqpmGrpKindList: 'modules/search/getEqpmGrpKindList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
113
components/common/select/SelectErcInfoList.vue
Normal file
113
components/common/select/SelectErcInfoList.vue
Normal 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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].ercList"
|
||||
item-text="ercNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '에너지원',
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
initFlag: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].ercId;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ ercId: value });
|
||||
},
|
||||
},
|
||||
blocId() {
|
||||
return this.searchParam[this.parentPrgmId].blocMstrList === undefined
|
||||
? null
|
||||
: this.searchParam[this.parentPrgmId].blocId;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async blocId(val) {
|
||||
if (this.initFlag === true) {
|
||||
await this.getErcList({
|
||||
useFg: 1,
|
||||
blocId: this.searchParam[this.parentPrgmId].blocMstrList[
|
||||
this.searchParam[this.parentPrgmId].blocId
|
||||
].blocId,
|
||||
});
|
||||
this.loadFlag = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.autoLoad) {
|
||||
this.getErcList({
|
||||
useFg: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getErcList: 'modules/search/getErcList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
124
components/common/select/SelectEvtCd1.vue
Normal file
124
components/common/select/SelectEvtCd1.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<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-select
|
||||
v-if="loadSelectBox"
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].evtCd1List"
|
||||
item-text="commCdNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '대분류',
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadSelectBox: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].evtCd1;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ evtCd1: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (this.autoLoad) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async initData() {
|
||||
this.loadSelectBox = false;
|
||||
var evtCd1List = await this.postApiReturn({
|
||||
apiKey: 'selectCommCd',
|
||||
resKey: 'commCdData',
|
||||
sendParam: {
|
||||
commGrpCd: 'EM_EVT1',
|
||||
useFg: '1',
|
||||
},
|
||||
});
|
||||
if (this.addAll) {
|
||||
evtCd1List.unshift({
|
||||
commCdNm: '전체',
|
||||
commCd: '',
|
||||
});
|
||||
}
|
||||
// evtCd1List.unshift({
|
||||
// commCdNm: "전체"
|
||||
// });
|
||||
|
||||
var tempIdx = 0;
|
||||
evtCd1List.map(item => {
|
||||
item.idx = tempIdx++;
|
||||
});
|
||||
|
||||
this.setPageData({ evtCd1: 0, evtCd1List: evtCd1List });
|
||||
this.loadSelectBox = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
137
components/common/select/SelectEvtCd2.vue
Normal file
137
components/common/select/SelectEvtCd2.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].evtCd2List"
|
||||
item-text="commCdNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '소분류',
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
reLoadFlag() {
|
||||
var returnValue = false;
|
||||
|
||||
if (this.searchParam[this.parentPrgmId].evtCd1 != null) {
|
||||
returnValue = this.searchParam[this.parentPrgmId].evtCd1;
|
||||
}
|
||||
|
||||
return returnValue;
|
||||
},
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].evtCd2;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ evtCd2: value });
|
||||
},
|
||||
},
|
||||
evtCd1Flag() {
|
||||
return this.searchParam[this.parentPrgmId].evtCd1;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async reLoadFlag() {
|
||||
await this.initData();
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (this.autoLoad && this.reLoadFlag) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async initData() {
|
||||
var evtCd2List = await this.postApiReturn({
|
||||
apiKey: 'selectCommCd',
|
||||
resKey: 'commCdData',
|
||||
sendParam: {
|
||||
commGrpCd: 'EM_EVT2',
|
||||
userDefVal1: this.searchParam[this.parentPrgmId].evtCd1List[
|
||||
this.searchParam[this.parentPrgmId].evtCd1
|
||||
].commCd,
|
||||
useFg: '1',
|
||||
},
|
||||
});
|
||||
|
||||
if (this.addAll) {
|
||||
evtCd2List.unshift({
|
||||
commCdNm: '전체',
|
||||
commCd: '',
|
||||
});
|
||||
}
|
||||
|
||||
var tempIdx = 0;
|
||||
evtCd2List.map(item => {
|
||||
item.idx = tempIdx++;
|
||||
});
|
||||
|
||||
this.setPageData({ evtCd2: 0, evtCd2List: evtCd2List });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
88
components/common/select/SelectFactoryList.vue
Normal file
88
components/common/select/SelectFactoryList.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].factoryList"
|
||||
label="공장을 선택하세요"
|
||||
item-text="plcNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '공장',
|
||||
labelPrepend: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].plcCd;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ plcCd: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const sendParam = {
|
||||
plcKind: 'LOC_FAC',
|
||||
plcCd: 'PLC00001',
|
||||
};
|
||||
this.getFactoryList(sendParam);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getFactoryList: 'modules/search/getFactoryList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
85
components/common/select/SelectMttGrp.vue
Normal file
85
components/common/select/SelectMttGrp.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].mttGrpList"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
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,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].mttGrp;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ mttGrp: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
commGrpCd: 'CM_MTTGRP',
|
||||
useFg: '1',
|
||||
};
|
||||
this.getMttGrpList(params);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getMttGrpList: 'modules/search/getMttGrpList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
119
components/common/select/SelectMttList.vue
Normal file
119
components/common/select/SelectMttList.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<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 small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="mttNm"
|
||||
item-value="mttCd"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
outlined
|
||||
hide-details
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
mySendMttParam() {
|
||||
return this.searchParam[this.parentPrgmId]['sendMttParam'];
|
||||
},
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
mySendMttParam() {
|
||||
this.getMttList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.searchParam[this.parentPrgmId]['sendMttParam'],
|
||||
});
|
||||
// this.selectValue(this.searchParam[this.parentPrgmId].mttCdList[0].mttCd);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.searchParam[this.parentPrgmId]['sendMttParam'].mttTp!=""){
|
||||
this.getMttList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.searchParam[this.parentPrgmId]['sendMttParam'],
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getMttList: 'modules/search/getMttList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
112
components/common/select/SelectPrgmTpCd.vue
Normal file
112
components/common/select/SelectPrgmTpCd.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<v-row class="search-box">
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label ft-size_14 ft-clr_g-c">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="selectList"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
diffModel: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '프로그램구분',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
if (!this.diffModel) {
|
||||
return this.searchParam[this.parentPrgmId].prgmTpCd;
|
||||
} else {
|
||||
return this.searchParam[this.parentPrgmId][this.diffModel];
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
if (!this.diffModel) {
|
||||
return this.setPageData({ prgmTpCd: value });
|
||||
} else {
|
||||
return this.setPageData({ [this.diffModel]: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
selectList() {
|
||||
let list = this.searchParam[this.parentPrgmId].prgmTpCdList;
|
||||
const dummyData = [
|
||||
{
|
||||
rowStat: null,
|
||||
commGrpCd: 'CO_USEFG',
|
||||
commCd: '1',
|
||||
commCdNm: '프로그램',
|
||||
useFg: '1',
|
||||
sortSeq: 1,
|
||||
},
|
||||
{
|
||||
rowStat: null,
|
||||
commGrpCd: 'CO_USEFG',
|
||||
commCd: '2',
|
||||
commCdNm: '팝업',
|
||||
useFg: '1',
|
||||
sortSeq: 2,
|
||||
},
|
||||
];
|
||||
this.setPageData({ prgmTpCdList: dummyData });
|
||||
list = dummyData;
|
||||
return list;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
commGrpCd: 'CO_USEFG',
|
||||
useFg: '1',
|
||||
};
|
||||
this.getPrgmTpCdList(params);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getPrgmTpCdList: 'modules/search/getPrgmTpCdList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
103
components/common/select/SelectReadObj.vue
Normal file
103
components/common/select/SelectReadObj.vue
Normal 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="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="readObjNm"
|
||||
item-value="readObjId"
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.autoLoad)
|
||||
this.getReadObjInfoList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.sendParam,
|
||||
addAll: this.addAll,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getReadObjInfoList: 'modules/search/getReadObjInfoList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
105
components/common/select/SelectReadObjEccInfo.vue
Normal file
105
components/common/select/SelectReadObjEccInfo.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].readObjInfoList"
|
||||
item-text="readObjNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '대상',
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].readObjInfo;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ readObjInfo: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (this.autoLoad) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async initData() {
|
||||
var readObjInfoList = await this.postApiReturn({
|
||||
apiKey: 'selectReadObjInfo',
|
||||
resKey: 'readObjInfoData',
|
||||
sendParam: {
|
||||
grpCd: 'MTT_PROD',
|
||||
useFg: '1',
|
||||
},
|
||||
});
|
||||
|
||||
var tempIdx = 0;
|
||||
readObjInfoList.map(item => {
|
||||
item.idx = tempIdx++;
|
||||
});
|
||||
|
||||
this.setPageData({ readObjInfo: 0, readObjInfoList: readObjInfoList });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
150
components/common/select/SelectReceiveTime.vue
Normal file
150
components/common/select/SelectReceiveTime.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<v-row class="search-box">
|
||||
<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-select
|
||||
ref="fromSelect"
|
||||
v-model="fromValue"
|
||||
:items="this.timeList"
|
||||
item-text="valueNm"
|
||||
item-value="value"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<div class="mx-3" :style="{ lineHeight: 0 }">~</div>
|
||||
<v-select
|
||||
ref="toSelect"
|
||||
v-model="toValue"
|
||||
:items="this.timeList"
|
||||
item-text="valueNm"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '수신 가능 시각',
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
toValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].recvToTm;
|
||||
},
|
||||
set(value) {
|
||||
if (value < this.searchParam[this.parentPrgmId].recvFrTm) {
|
||||
this.$refs['toSelect'].selectItem(
|
||||
this.searchParam[this.parentPrgmId].recvToTm,
|
||||
);
|
||||
} else {
|
||||
return this.setPageData({ recvToTm: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
fromValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].recvFrTm;
|
||||
},
|
||||
set(value) {
|
||||
if (value > this.searchParam[this.parentPrgmId].recvToTm) {
|
||||
this.$refs['fromSelect'].selectItem(
|
||||
this.searchParam[this.parentPrgmId].recvFrTm,
|
||||
);
|
||||
} else {
|
||||
return this.setPageData({ recvFrTm: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async reLoadFlag() {
|
||||
await this.initData();
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (this.autoLoad && this.reLoadFlag) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setTimeList();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
setTimeList() {
|
||||
for (var i = 0; i < 24; i++) {
|
||||
this.timeList.push({
|
||||
valueNm: String(i) + '시',
|
||||
value: i.toString().padStart(2, '0'),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async initData() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
121
components/common/select/SelectSnarEnergy.vue
Normal file
121
components/common/select/SelectSnarEnergy.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<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-select
|
||||
v-if="loadSelectBox"
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].snarEnergyList"
|
||||
item-text="ercNm"
|
||||
item-value="ercId"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '에너지원',
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadSelectBox: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].snarEnergyCd;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ snarEnergyCd: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (this.autoLoad) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async initData() {
|
||||
this.loadSelectBox = false;
|
||||
var snarEnergyList = await this.postApiReturn({
|
||||
apiKey: 'selectErcInfoList',
|
||||
resKey: 'snarEnergyData',
|
||||
sendParam: {
|
||||
useFg: '1',
|
||||
},
|
||||
});
|
||||
if (this.addAll) {
|
||||
snarEnergyList.unshift({
|
||||
ercNm: '전체',
|
||||
ercId: '',
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
var tempIdx = 0;
|
||||
snarEnergyList.map(item => {
|
||||
item.idx = tempIdx++;
|
||||
})
|
||||
*/
|
||||
|
||||
this.setPageData({ snarEnergyCd: '', snarEnergyList: snarEnergyList });
|
||||
this.loadSelectBox = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
110
components/common/select/SelectStandardList.vue
Normal file
110
components/common/select/SelectStandardList.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="readObjNm"
|
||||
item-value="readObjId"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
// ...mapActions({
|
||||
// postApi: "modules/list/postApi",
|
||||
// postUpdateApi: "modules/list/postUpdateApi",
|
||||
// postApiReturn: "modules/list/postApiReturn",
|
||||
// setTree: "modules/list/setTree",
|
||||
// chkOpenTabList: "chkOpenTabList"
|
||||
// }),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// if(this.autoLoad){
|
||||
this.getStandardList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.sendParam,
|
||||
});
|
||||
// }
|
||||
// console.log("dataKey", this.dataKey);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getStandardList: 'modules/search/getStandardList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
104
components/common/select/SelectSysDiv.vue
Normal file
104
components/common/select/SelectSysDiv.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="selectList"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
diffModel: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
isAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '시스템구분',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
if (!this.diffModel) {
|
||||
return this.searchParam[this.parentPrgmId].sysDivCd;
|
||||
} else {
|
||||
return this.searchParam[this.parentPrgmId][this.diffModel];
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
if (!this.diffModel) {
|
||||
return this.setPageData({ sysDivCd: value });
|
||||
} else {
|
||||
return this.setPageData({ [this.diffModel]: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
selectList() {
|
||||
let list = this.searchParam[this.parentPrgmId].sysDivCdList;
|
||||
if (this.isAll) {
|
||||
list.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '전체',
|
||||
});
|
||||
}
|
||||
return list;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
commGrpCd: 'CO_SYSDIV',
|
||||
useFg: '1',
|
||||
};
|
||||
this.getSysDivList(params);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getSysDivList: 'modules/search/getSysDivList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
121
components/common/select/SelectSystem.vue
Normal file
121
components/common/select/SelectSystem.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<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-select
|
||||
v-if="loadSelectBox"
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].systemCdList"
|
||||
item-text="commCdNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '시스템',
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadSelectBox: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].systemCd;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ systemCd: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (this.autoLoad) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async initData() {
|
||||
this.loadSelectBox = false;
|
||||
var systemCdList = await this.postApiReturn({
|
||||
apiKey: 'selectCommCd',
|
||||
resKey: 'commCdData',
|
||||
sendParam: {
|
||||
commGrpCd: 'EM_SYS',
|
||||
useFg: '1',
|
||||
},
|
||||
});
|
||||
if (this.addAll) {
|
||||
systemCdList.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '전체',
|
||||
});
|
||||
}
|
||||
|
||||
var tempIdx = 0;
|
||||
systemCdList.map(item => {
|
||||
item.idx = tempIdx++;
|
||||
});
|
||||
|
||||
this.setPageData({ systemCd: 0, systemCdList: systemCdList });
|
||||
this.loadSelectBox = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
116
components/common/select/SelectTagNmList.vue
Normal file
116
components/common/select/SelectTagNmList.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].tagList"
|
||||
item-text="tagNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
outlined
|
||||
hide-details
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 12,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
chkSendTagParam() {
|
||||
return this.searchParam[this.parentPrgmId].sendTagParam;
|
||||
},
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].tagId;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ tagId: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async chkSendTagParam() {
|
||||
if (this.autoLoad) {
|
||||
await this.initData();
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async initData() {
|
||||
var tagList = await this.postApiReturn({
|
||||
apiKey: 'selectTagNmList',
|
||||
resKey: 'tagNmListData',
|
||||
sendParam: this.searchParam[this.parentPrgmId].sendTagParam,
|
||||
});
|
||||
|
||||
if (this.addAll) {
|
||||
tagList.unshift({
|
||||
tagNm: '전체',
|
||||
tagId: '',
|
||||
});
|
||||
}
|
||||
|
||||
var tempIdx = 0;
|
||||
tagList.map(item => {
|
||||
item.idx = tempIdx++;
|
||||
});
|
||||
|
||||
this.setPageData({ tagId: 0, tagList: tagList });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
85
components/common/select/SelectUnit.vue
Normal file
85
components/common/select/SelectUnit.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].unitList"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
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,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].unitCd;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ mttGrp: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
commGrpCd: 'CM_UNIT',
|
||||
useFg: '1',
|
||||
};
|
||||
this.getUnitList(params);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getUnitList: 'modules/search/getUnitList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
109
components/common/select/SelectUseFg.vue
Normal file
109
components/common/select/SelectUseFg.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<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="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="selectList"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
diffModel: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '사용여부',
|
||||
},
|
||||
isAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
if (!this.diffModel) {
|
||||
return this.searchParam[this.parentPrgmId].useFg;
|
||||
} else {
|
||||
return this.searchParam[this.parentPrgmId][this.diffModel];
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
if (!this.diffModel) {
|
||||
return this.setPageData({ useFg: value });
|
||||
} else {
|
||||
return this.setPageData({ [this.diffModel]: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
selectList() {
|
||||
let list = this.searchParam[this.parentPrgmId].useFgList;
|
||||
if (this.isAll) {
|
||||
list.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '전체',
|
||||
});
|
||||
}
|
||||
return list;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
commGrpCd: 'CO_USEFG',
|
||||
useFg: '1',
|
||||
};
|
||||
this.getUseFgList(params);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getUseFgList: 'modules/search/getUseFgList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
132
components/common/select/selectCodeList.vue
Normal file
132
components/common/select/selectCodeList.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
mttGrpCd: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
},
|
||||
set(value) {
|
||||
if (this.mttGrpCd) {
|
||||
var userDefVal1 = '';
|
||||
for (
|
||||
var i = 0;
|
||||
i < this.searchParam[this.parentPrgmId].commCdList.length;
|
||||
i++
|
||||
) {
|
||||
if (
|
||||
this.searchParam[this.parentPrgmId].commCdList[i].commCd == value
|
||||
) {
|
||||
userDefVal1 = this.searchParam[this.parentPrgmId].commCdList[i]
|
||||
.userDefVal1;
|
||||
}
|
||||
}
|
||||
return this.setPageData({
|
||||
[this.dataKey]: value,
|
||||
userDefVal1: userDefVal1,
|
||||
});
|
||||
} else {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.autoLoad)
|
||||
this.getCodeList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.sendParam,
|
||||
addAll: this.addAll,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user