gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

init dev-push code ui base design

Browse Source
This commit is contained in:
leonard
2025-07-22 09:58:38 +07:00
parent ffdf5ccb66
commit eedbf94d56
214 changed files with 42170 additions and 28040 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/common/select/SelectAddGrp.vue
View File

@ -3,8 +3,12 @@
<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
<v-icon
v-if="iconShow"
small
:color="'#4777d9'"
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ label }}
</label>
@ -18,7 +22,7 @@
solo
outlined
append-icon="mdi-chevron-down"
class="v-select__custom"
:class="['v-select__custom', customClass]"
></v-select>
</v-col>
</v-row>
@ -61,12 +65,21 @@ export default {
textCols: {
type: Number,
require: false,
default: 7,
default: 12,
},
labelCols: {
type: Number,
require: false,
default: 4,
default: 12,
},
iconShow: {
type: Boolean,
require: false,
default: true
},
customClass: {
type: String,
require: false,
},
},
data() {

40
components/common/select/SelectBlocMstr.vue
View File

@ -2,22 +2,23 @@
<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>
<v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</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-select v-model="selectValue" :items="searchParam[parentPrgmId].blocMstrList" label="사업장을 선택하세요"
item-text="blocNm" item-value="idx" append-icon="" class="v-select__custom" outlined
:hide-details="true" :class="['v-select__custom', customClass]">
<template v-slot:append>
    <v-icon>$icoChevronDown</v-icon>
  </template>
</v-select>
</v-col>
</v-row>
</template>
@ -56,6 +57,21 @@ export default {
require: false,
default: 4,
},
required: {
type: Boolean,
require: false,
default: false
},
iconShow: {
type: Boolean,
require: false,
default: true,
},
customClass: {
type: String,
require: false,
default: null,
}
},
data() {
return {

66
components/common/select/SelectBox.vue
View File

@ -2,26 +2,24 @@
<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>
<v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</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>
<v-select v-model="innerValue" :items="itemList" item-text="text" item-value="value" solo outlined
:hide-details="true" append-icon="" :class="['v-select__custom', customClass]" :disabled="disabled"
:readonly="readonly"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoChevronDown</v-icon>
</template></v-select>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
@ -44,12 +42,12 @@ export default {
textCols: {
type: Number,
require: false,
default: 8,
default: 12,
},
labelCols: {
type: Number,
require: false,
default: 4,
default: 12,
},
itemList: {
type: Array,
@ -61,25 +59,29 @@ export default {
require: true,
default: null,
},
required:{
type:Boolean,
require:false,
default:false
required: {
type: Boolean,
require: false,
default: false
},
iconShow:{
type:Boolean,
require:false,
default:true
iconShow: {
type: Boolean,
require: false,
default: true
},
disabled: {
type:Boolean,
require:false,
default:false
type: Boolean,
require: false,
default: false
},
readonly: {
type:Boolean,
require:false,
default:false
type: Boolean,
require: false,
default: false
},
customClass: {
type: String,
require: false,
},
},
emits: ['update:propsValue'],

23
components/common/select/SelectBoxMulti.vue
View File

@ -2,9 +2,12 @@
<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>
<v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ label }}
</label>
</v-col>
@ -14,16 +17,16 @@
:items="itemList"
item-text="text"
item-value="value"
solo
outlined
:multiple="multiple"
:hide-details="true"
append-icon="mdi-chevron-down"
class="v-select__custom"
append-icon=""
:class="['v-select__custom', customClass]"
:disabled="disabled"
:readonly="readonly"
></v-select>
<!-- @change="updateBlocCode($event)" -->
><template v-slot:append>
<v-icon>$icoChevronDown</v-icon>
</template></v-select>
</v-col>
</v-row>
</template>
@ -87,6 +90,10 @@ export default {
require:false,
default:false
},
customClass: {
type: String,
require: false,
},
},
emits: ['update:propsValue'],
data() {

307
components/common/select/SelectBoxTime.vue
View File

@ -1,160 +1,171 @@
<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>
<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"
:class="'v-select__custom select-large'"
:disabled="disabled"
:readonly="readonly"
@click="setDatepickerHide"
style="width: 170px; border-radius: 6px !important"
>
<template v-slot:append>
<a-icon
class="v-icon"
type="clock-circle"
style="width: 14px; height: 14px; color: #00000073"
/>
</template>
</v-select>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
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');
}
}
},
components: {},
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 {
// .v-select__custom {
// &.time {
// width: calc(50%);
// }

295
components/common/select/SelectCmCycle.vue
View File

@ -1,151 +1,170 @@
<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>
<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"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</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', customClass]"
></v-select>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Utility from '~/plugins/utility';
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;
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: "주기",
},
iconShow: {
type: Boolean,
require: false,
default: true,
},
required: {
type: Boolean,
require: false,
default: false,
},
customClass: {
type: String,
require: false,
},
},
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_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_DAY":
endDate = today;
srartDate = Utility.setBeforetDate(
this.searchParam[this.parentPrgmId],
endDate,
"YYYYMMDD"
);
break;
case 'CYC_HOUR':
endDate = today;
srartDate = today;
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);
},
},
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>

20
components/common/select/SelectEqpmGrp.vue
View File

@ -2,7 +2,9 @@
<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>
<v-icon v-if="iconShow" small color="primary"
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon>
{{ label }}
</label>
</v-col>
@ -15,7 +17,7 @@
solo
outlined
append-icon="mdi-chevron-down"
class="v-select__custom"
:class="['v-select__custom', customClass]"
></v-select>
</v-col>
</v-row>
@ -65,6 +67,20 @@ export default {
require: false,
default: 4,
},
required: {
type: Boolean,
require: false,
default: false
},
iconShow: {
type: Boolean,
require: false,
default: true,
},
customClass: {
type: String,
require: false,
},
},
data() {
return {};

236
components/common/select/SelectMttList.vue
View File

@ -1,118 +1,136 @@
<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>
<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" 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>
</label> -->
<label for="" class="search-box-label">
<v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</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', customClass]"
outlined
hide-details
></v-select>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
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',
}),
},
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,
},
iconShow: {
type: Boolean,
require: false,
default: true,
},
customClass: {
type: String,
require: false,
},
},
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>

30
components/common/select/SelectReadObj.vue
View File

@ -2,7 +2,12 @@
<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>
<v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ label }}
</label>
</v-col>
@ -14,9 +19,11 @@
item-value="readObjId"
solo
outlined
append-icon="mdi-chevron-down"
class="v-select__custom"
></v-select>
append-icon=""
:class="['v-select__custom', customClass]"
><template v-slot:append>
<v-icon>$icoChevronDown</v-icon>
</template></v-select>
</v-col>
</v-row>
</template>
@ -65,6 +72,21 @@ export default {
require: false,
default: 4,
},
required: {
type: Boolean,
require: false,
default: false
},
iconShow: {
type: Boolean,
require: false,
default: true,
},
customClass: {
type: String,
require: false,
default: null,
}
},
data() {
return {};

2
components/common/select/SelectReceiveTime.vue
View File

@ -146,5 +146,3 @@ export default {
},
};
</script>
<style></style>

26
components/common/select/SelectSysDiv.vue
View File

@ -2,7 +2,12 @@
<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>
<v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ label }}
</label>
</v-col>
@ -13,9 +18,12 @@
item-text="commCdNm"
item-value="commCd"
solo
append-icon="mdi-chevron-down"
class="v-select__custom"
></v-select>
outlined
append-icon=""
:class="['v-select__custom', customClass]"
><template v-slot:append>
<v-icon>$icoChevronDown</v-icon>
</template></v-select>
</v-col>
</v-row>
</template>
@ -47,6 +55,16 @@ export default {
require: false,
default: 4,
},
iconShow: {
type: Boolean,
require: false,
default: true,
},
customClass: {
type: String,
require: false,
default: null,
}
},
data() {
return {

25
components/common/select/SelectUseFg.vue
View File

@ -2,7 +2,12 @@
<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>
<v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ label }}
</label>
</v-col>
@ -15,9 +20,11 @@
solo
outlined
:hide-details="true"
append-icon="mdi-chevron-down"
class="v-select__custom"
></v-select>
append-icon=""
:class="['v-select__custom', customClass]"
><template v-slot:append>
<v-icon>$icoChevronDown</v-icon>
</template></v-select>
</v-col>
</v-row>
</template>
@ -54,6 +61,16 @@ export default {
require: false,
default: 4,
},
iconShow: {
type: Boolean,
require: false,
default: true,
},
customClass: {
type: String,
require: false,
default: null,
}
},
data() {
return {};

39
components/common/select/selectCodeList.vue
View File

@ -2,22 +2,18 @@
<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>
<v-icon v-if="iconShow" small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
$icoBulletPoint
</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>
<v-select v-model="selectValue" :items="searchParam[parentPrgmId][dataKey + 'List']" item-text="commCdNm"
item-value="commCd" outlined :hide-details="true" append-icon=""
:class="['v-select__custom', customClass]"><template v-slot:append>
<v-icon>$icoChevronDown</v-icon>
</template></v-select>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
@ -60,18 +56,33 @@ export default {
textCols: {
type: Number,
require: false,
default: 8,
default: 12,
},
labelCols: {
type: Number,
require: false,
default: 4,
default: 12,
},
mttGrpCd: {
type: Boolean,
require: false,
default: false,
},
customClass: {
type: String,
require: false,
default: null,
},
required: {
type: Boolean,
require: false,
default: false
},
iconShow: {
type: Boolean,
require: false,
default: true
},
},
data() {
return {