sk_fems_ui commit
This commit is contained in:
unknown
153
components/common/form/CheckBox.vue
Normal file
153
components/common/form/CheckBox.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" cols="4">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? 7 : ''">
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
style= "height: 36px; align-items: center;"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="item.readonly || false"
|
||||
:required="item.required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
// myGrid: {
|
||||
// require: true
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
//rowGridSelectKey
|
||||
computed: {
|
||||
...mapState({
|
||||
isDarkMode: state => state.isDarkMode,
|
||||
myBindingData(state) {
|
||||
// if(state.pageData[this.parentPrgmId]["rowGridSelectData"] != null){
|
||||
// state.pageData[this.parentPrgmId]["rowGridSelectData"][this.item.valueNm] = state.pageData[this.parentPrgmId]["rowGridSelectData"][this.item.valueNm] == "1"? true : false;
|
||||
// }
|
||||
// return state.pageData[this.parentPrgmId]["rowGridSelectData"];
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
pageData(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
selectRow(state) {
|
||||
return state.pageData[this.parentPrgmId][
|
||||
this.bindingData + 'SelectKey'
|
||||
];
|
||||
},
|
||||
}),
|
||||
// checkValue: {
|
||||
// get() {
|
||||
// return this.myBindingData ? this.myBindingData[this.item.valueNm] : "";
|
||||
// },
|
||||
// set(value) {
|
||||
// console.log(value);
|
||||
// return value;
|
||||
// // return this.setGridDataEdit({
|
||||
// // gridKey: this.bindingData,
|
||||
// // selectRow: this.selectRow,
|
||||
// // objKey: this.item.valueNm,
|
||||
// // value
|
||||
// // // value: this.getKeyByValue(this.item.value, value)
|
||||
// // });
|
||||
// }
|
||||
// },
|
||||
// checkValue: {
|
||||
// get() {
|
||||
// return this.myBindingData[this.selectRow]
|
||||
// ? this.item.value[
|
||||
// this.myBindingData[this.selectRow][this.item.valueNm]
|
||||
// ]
|
||||
// : false;
|
||||
// },
|
||||
// set(value) {
|
||||
// return this.setGridDataEdit({
|
||||
// gridKey: this.bindingData,
|
||||
// selectRow: this.selectRow,
|
||||
// objKey: this.item.valueNm,
|
||||
// value: this.getKeyByValue(this.item.value, value)
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
myBindingData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.chkValue = val[this.item.valueNm];
|
||||
// 대상 유형이 'TAG' 일 때만 계산 여부 disabled 처리
|
||||
if (
|
||||
this.item.valueNm == 'calcFg' &&
|
||||
val[this.item.disabledFg] == 'TAG'
|
||||
) {
|
||||
this.disabledFlag = true;
|
||||
} else {
|
||||
this.disabledFlag = this.item.disabled || false;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
|
||||
// getKeyByValue(object, value) {
|
||||
// // 추후 utility 로 빼야할 듯,, 값을 이용해서 키를 찾는 기능
|
||||
// return Object.keys(object).find(key => object[key] === value);
|
||||
// },
|
||||
modifyValue(e) {
|
||||
const dt = {
|
||||
columnName: this.item.valueNm,
|
||||
value: e,
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
137
components/common/form/Form.vue
Normal file
137
components/common/form/Form.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<v-row no-gutters>
|
||||
<template v-for="(item, index) in detailList">
|
||||
<v-col
|
||||
v-if="!item.showValue"
|
||||
:cols="item.cols"
|
||||
:class="item.class"
|
||||
:key="index"
|
||||
>
|
||||
<component
|
||||
:is="item.type"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:item="item"
|
||||
:myGrid="myGrid"
|
||||
:bindingData="bindingData"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
@inputClick="inputClick"
|
||||
/>
|
||||
</v-col>
|
||||
</template>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import InputText from './InputText';
|
||||
import InputNumber from './InputNumber';
|
||||
import TextArea from './TextArea';
|
||||
import SelectBox from './SelectBox';
|
||||
import SelectBoxes from './SelectBoxes';
|
||||
import CheckBox from './CheckBox';
|
||||
import ChangeUserPswdPopPage from '../modal/ChangeUserPswdPopPage';
|
||||
import EnrgReadPlacePop2Page from '../modal/EnrgReadPlacePop2Page';
|
||||
import EnrgCostCenterPop from '../modal/EnrgCostCenterPop';
|
||||
import ReadPlcPop from '../modal/ReadPlcPop';
|
||||
import EvtObjPop from '../modal/EvtObjPop';
|
||||
import FtnPlcFormPop from '../modal/FtnPlcFormPop';
|
||||
import FtnPlcMultiFormPop from '../modal/FtnPlcMultiFormPop';
|
||||
import ElecPowChrgPop from '../modal/ElecPowChrgPop';
|
||||
import Label from './Label';
|
||||
import BatchPop from '../modal/BatchPop';
|
||||
import OnlnBasicUnitAddInfoPop from '../modal/OnlnBasicUnitAddInfoPop';
|
||||
import EgrpPysclQtyPop from '../modal/EgrpPysclQtyPop';
|
||||
import EqpmCalcPop from '../modal/EqpmCalcPop';
|
||||
import EqpmBaseInfoPop from '../modal/EqpmBaseInfoPop';
|
||||
import InputTextReg from './InputTextReg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
detailList: {
|
||||
type: Array,
|
||||
require: false,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
myGrid: {
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
InputText,
|
||||
InputNumber,
|
||||
TextArea,
|
||||
SelectBox,
|
||||
SelectBoxes,
|
||||
CheckBox,
|
||||
ChangeUserPswdPopPage,
|
||||
EnrgReadPlacePop2Page,
|
||||
EnrgCostCenterPop,
|
||||
ReadPlcPop,
|
||||
OnlnBasicUnitAddInfoPop,
|
||||
ElecPowChrgPop,
|
||||
EvtObjPop,
|
||||
Label,
|
||||
FtnPlcFormPop,
|
||||
BatchPop,
|
||||
FtnPlcMultiFormPop,
|
||||
EgrpPysclQtyPop,
|
||||
EqpmCalcPop,
|
||||
EqpmBaseInfoPop,
|
||||
InputTextReg
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
rowGridSelectData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId].rowGridSelectData;
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData]
|
||||
.rowGridSelectData;
|
||||
}
|
||||
},
|
||||
}),
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setGridSelectData: 'setGridSelectData',
|
||||
}),
|
||||
gridEditingFinish(data) {
|
||||
const newData = {
|
||||
[data.columnName]: data.value,
|
||||
};
|
||||
|
||||
if (!this.bindingData) {
|
||||
this.setPageData({
|
||||
rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
|
||||
});
|
||||
} else {
|
||||
this.setGridSelectData({
|
||||
gridKey: this.bindingData,
|
||||
rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
|
||||
});
|
||||
}
|
||||
this.$emit('gridEditingFinish', data, this.bindingData);
|
||||
},
|
||||
inputClick(event, item, valueNm) {
|
||||
this.$emit('inputClick', event, item, valueNm);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
171
components/common/form/InputNumber.vue
Normal file
171
components/common/form/InputNumber.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? 7 : ''">
|
||||
<!-- v-model="InputValue" -->
|
||||
<v-text-field
|
||||
v-model="textValue"
|
||||
class="v-input__custom"
|
||||
type=""
|
||||
:disabled="
|
||||
item.disabled ||
|
||||
(item.elseDisabled &&
|
||||
myBindingData &&
|
||||
item.elseDisabled !== myBindingData.rowStat) ||
|
||||
disabledCondition ||
|
||||
false
|
||||
"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:readonly="item.readonly || false"
|
||||
:required="item.required || false"
|
||||
@keyup="modifyValue"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
// myGrid: {
|
||||
// require: true
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textValue: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
// selectRow(state) {
|
||||
// return state.pageData[this.parentPrgmId][
|
||||
// this.bindingData + "SelectKey"
|
||||
// ];
|
||||
// }
|
||||
}),
|
||||
getValue() {
|
||||
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
|
||||
},
|
||||
// InputValue: {
|
||||
// get() {
|
||||
// // console.log(this.myBindingData);
|
||||
// return this.myBindingData ? this.myBindingData[this.item.valueNm] : " ";
|
||||
// },
|
||||
// set(value) {
|
||||
// let setVal = this.validateNumber(value);
|
||||
// console.log("setVal", setVal);
|
||||
// return this.newValue(setVal);
|
||||
// }
|
||||
// },
|
||||
disabledCondition() {
|
||||
if (this.myBindingData && this.item.disabledCondition) {
|
||||
let isDisabled = false;
|
||||
this.item.disabledCondition.forEach(condition => {
|
||||
if (this.myBindingData[condition.dataKey] == condition.value) {
|
||||
isDisabled = true;
|
||||
}
|
||||
});
|
||||
return isDisabled;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
getValue() {
|
||||
// this.textValue = this.validateNumber(this.getValue);
|
||||
// this.textValue = this.validateNumber(this.getValue);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// console.log(this.bindingData);
|
||||
},
|
||||
methods: {
|
||||
// ...mapMutations({ setGridDataEdit: "setGridDataEdit" }),
|
||||
modifyValue(e) {
|
||||
let val = e.target.value.replace(/[^-.0-9]/g, '');
|
||||
|
||||
console.log('val : ', val);
|
||||
|
||||
if(this.item.min != undefined && parseFloat(val) < this.item.min){
|
||||
val = this.item.min;
|
||||
}
|
||||
|
||||
if(this.item.max != undefined && parseFloat(val) > this.item.max){
|
||||
val = this.item.max;
|
||||
}
|
||||
console.log('val2 : ', val);
|
||||
|
||||
this.textValue = val;
|
||||
// this.textValue = this.validateNumber(val);
|
||||
|
||||
const dt = {
|
||||
columnName: this.item.valueNm,
|
||||
value: val,
|
||||
// value: this.newValue(val),
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
},
|
||||
newValue(value) {
|
||||
let returnVal = value;
|
||||
if (this.item.decimalPlaces) {
|
||||
const x = returnVal.replace('.', '');
|
||||
const y = 10 ** -this.item.decimalPlaces;
|
||||
let z = x * y;
|
||||
// console.log(x * y);
|
||||
if (z === 0) {
|
||||
z = 10 ** -(this.item.decimalPlaces + 1);
|
||||
}
|
||||
// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
|
||||
returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
|
||||
}
|
||||
return returnVal;
|
||||
},
|
||||
validateNumber(value) {
|
||||
let returnVal = String(value).replaceAll(',', '');
|
||||
returnVal = Utility.setFormatInt(returnVal);
|
||||
if (returnVal == 'NaN') returnVal = null;
|
||||
|
||||
return returnVal;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
182
components/common/form/InputText.vue
Normal file
182
components/common/form/InputText.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<v-row v-if="!item.showValue" class="search-box" align="center" no-gutters>
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col
|
||||
v-if="!item.hideText"
|
||||
:cols="item.textCols !== undefined ? item.textCols : item.label ? 7 : ''"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="InputValue"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:type="item.inputType || 'text'"
|
||||
:min="item.min || ''"
|
||||
:max="item.max || ''"
|
||||
:onkeyup="item.onkeyup || ''"
|
||||
:onkeydown="item.onkeydown || ''"
|
||||
:hide-details="true"
|
||||
:disabled="
|
||||
item.disabled ||
|
||||
(item.elseDisabled &&
|
||||
myBindingData &&
|
||||
item.elseDisabled !== myBindingData.rowStat) ||
|
||||
disabledCondition ||
|
||||
false
|
||||
"
|
||||
:readonly="
|
||||
item.readonly ||
|
||||
(item.elseReadonly &&
|
||||
myBindingData &&
|
||||
item.elseReadonly !== myBindingData.rowStat) ||
|
||||
readonlyCondition ||
|
||||
false
|
||||
"
|
||||
:required="item.required || false"
|
||||
:placeholder="item.placeholder"
|
||||
@input="modifyValue($event, item.valueNm)"
|
||||
@click="onClick($event, item, item.valueNm)"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
|
||||
<label for="" class="search-box-label px-1">
|
||||
({{ InputValue.length }} / {{ item.lengthCheck.maxLength }})
|
||||
</label>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
// myGrid: {
|
||||
// require: true
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
// selectRow(state) {
|
||||
// return state.pageData[this.parentPrgmId][
|
||||
// this.bindingData + "SelectKey"
|
||||
// ];
|
||||
// }
|
||||
}),
|
||||
InputValue: {
|
||||
get() {
|
||||
// console.log(this.myBindingData);
|
||||
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('getValue', {
|
||||
key: this.item.valueNm,
|
||||
value: value,
|
||||
});
|
||||
return this.newValue(value);
|
||||
},
|
||||
},
|
||||
disabledCondition() {
|
||||
if (this.myBindingData && this.item.disabledCondition) {
|
||||
let isDisabled = false;
|
||||
this.item.disabledCondition.forEach(condition => {
|
||||
if (this.myBindingData[condition.dataKey] == condition.value) {
|
||||
isDisabled = true;
|
||||
}
|
||||
});
|
||||
return isDisabled;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
readonlyCondition() {
|
||||
if (this.myBindingData && this.item.readonlyCondition) {
|
||||
let isReadonly = false;
|
||||
this.item.readonlyCondition.forEach(condition => {
|
||||
if (this.myBindingData[condition.dataKey] == condition.value) {
|
||||
isReadonly = true;
|
||||
}
|
||||
});
|
||||
return isReadonly;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
// console.log(this.bindingData);
|
||||
},
|
||||
methods: {
|
||||
// ...mapMutations({ setGridDataEdit: "setGridDataEdit" }),
|
||||
modifyValue(v, n) {
|
||||
// console.log(this.newValue(v));
|
||||
|
||||
const dt = {
|
||||
columnName: n,
|
||||
// value: v.trim()
|
||||
value: this.newValue(v),
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
},
|
||||
newValue(value) {
|
||||
let returnVal = value.trim();
|
||||
if (this.item.decimalPlaces) {
|
||||
const x = returnVal.replace('.', '');
|
||||
const y = 10 ** -this.item.decimalPlaces;
|
||||
let z = x * y;
|
||||
// console.log(x * y);
|
||||
if (z === 0) {
|
||||
z = 10 ** -(this.item.decimalPlaces + 1);
|
||||
}
|
||||
// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
|
||||
returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
|
||||
}
|
||||
return returnVal;
|
||||
},
|
||||
onClick(event, item, valueNm) {
|
||||
this.$emit('inputClick', event, item, valueNm);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
121
components/common/form/InputTextReg.vue
Normal file
121
components/common/form/InputTextReg.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="item.iconShow" x-small :color="item.required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? item.textCols : ''">
|
||||
<v-text-field
|
||||
ref="formRef"
|
||||
:value="InputValue"
|
||||
class="v-input__custom"
|
||||
:disabled="item.disabled"
|
||||
:readonly="item.readonly"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
@keyup.enter="search"
|
||||
@keydown="keydownEvent"
|
||||
@keyup="keyupEvent"
|
||||
@input="inputEvent($event, item.valueNm)"
|
||||
:placeholder="item.placeholder"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
menuData: 'menuData',
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
}),
|
||||
InputValue: {
|
||||
get() {
|
||||
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('getValue', {
|
||||
key: this.item.valueNm,
|
||||
value: value,
|
||||
});
|
||||
return this.newValue(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
search() {
|
||||
if (this.searchOption === true) {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
inputEvent(str,n){
|
||||
var temp = str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣\s]*/i)[0];
|
||||
var regExp = /[^a-z]*/;
|
||||
temp = temp.match(regExp)[0];
|
||||
this.$refs.formRef.lazyValue = temp;
|
||||
const dt = {
|
||||
columnName : n,
|
||||
value : this.newValue(this.$refs.formRef.lazyValue)
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
},
|
||||
keydownEvent($event){
|
||||
|
||||
},
|
||||
keyupEvent($event){
|
||||
|
||||
},
|
||||
newValue(value) {
|
||||
let returnVal = value.trim();
|
||||
if (this.item.decimalPlaces) {
|
||||
const x = returnVal.replace('.', '');
|
||||
const y = 10 ** -this.item.decimalPlaces;
|
||||
let z = x * y;
|
||||
// console.log(x * y);
|
||||
if (z === 0) {
|
||||
z = 10 ** -(this.item.decimalPlaces + 1);
|
||||
}
|
||||
// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
|
||||
returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
|
||||
}
|
||||
return returnVal;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
36
components/common/form/Label.vue
Normal file
36
components/common/form/Label.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.cols">
|
||||
<label for="" class="search-box-label">
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({}),
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
127
components/common/form/SelectBox.vue
Normal file
127
components/common/form/SelectBox.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
cols="4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="typeof item.list != 'string' ? item.list : myListData"
|
||||
:item-text="typeof item.list != 'string' ? 'text' : item.itemText"
|
||||
:item-value="typeof item.list != 'string' ? 'value' : item.itemValue"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:disabled="item.disabled || false"
|
||||
:readonly="item.readonly || false"
|
||||
:required="item.required || false"
|
||||
@change="modifyValue($event, item.valueNm)"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
// myGrid: {
|
||||
// require: true
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
myListData(state) {
|
||||
let list = [...state.pageData[this.parentPrgmId][this.item.list]];
|
||||
list.forEach((item, idx) => {
|
||||
if (item.commCdNm && item.commCdNm == '전체') {
|
||||
list.splice(idx, 1);
|
||||
}
|
||||
if (this.item.addNull && idx == 0) {
|
||||
list.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '',
|
||||
commCdAbbrnm: '',
|
||||
commGrpCd: 'EM_ECC_KIND',
|
||||
});
|
||||
}
|
||||
});
|
||||
return list;
|
||||
},
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
selectRow(state) {
|
||||
return state.pageData[this.parentPrgmId][
|
||||
this.bindingData + 'SelectKey'
|
||||
];
|
||||
},
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('getValue', {
|
||||
key: this.item.valueNm,
|
||||
value: value,
|
||||
});
|
||||
return value;
|
||||
// return this.setGridDataEdit({
|
||||
// gridKey: this.bindingData,
|
||||
// selectRow: this.selectRow,
|
||||
// objKey: this.item.valueNm,
|
||||
// value
|
||||
// });
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
|
||||
modifyValue(v, n) {
|
||||
const dt = {
|
||||
columnName: n,
|
||||
value: v,
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
97
components/common/form/SelectBoxes.vue
Normal file
97
components/common/form/SelectBoxes.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" cols="4">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? 8 : ''">
|
||||
<v-row>
|
||||
<template v-for="(groupItem, idx) in item.groups">
|
||||
<v-col
|
||||
:cols="groupItem.cols"
|
||||
:class="groupItem.class"
|
||||
:key="'SelectBoxes' + idx"
|
||||
>
|
||||
<template v-if="groupItem.text">
|
||||
<span>{{ groupItem.text }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:item="groupItem"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
</template>
|
||||
</v-col>
|
||||
</template>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import SelectBox from './SelectBox';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
item: {
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
// gridEditingFinish: {
|
||||
// // type: function
|
||||
// // require: true
|
||||
// }
|
||||
},
|
||||
components: {
|
||||
SelectBox,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
rowGridSelectData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
}),
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
gridEditingFinish(data) {
|
||||
const newData = {
|
||||
[data.columnName]: data.value,
|
||||
};
|
||||
this.setPageData({
|
||||
rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
|
||||
});
|
||||
this.$emit('gridEditingFinish', data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
114
components/common/form/TextArea.vue
Normal file
114
components/common/form/TextArea.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
:cols="item.cols == 12 ? 2 : 4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
<span v-if="item.maxlength" class="search-box-label body-2">
|
||||
({{ InputValue ? InputValue.length : 0 }}/{{ item.maxlength }}자)
|
||||
</span>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
|
||||
<v-textarea
|
||||
v-model="InputValue"
|
||||
class="v-input__custom"
|
||||
:rows="item.rows"
|
||||
:disabled="
|
||||
item.disabled ||
|
||||
(item.elseDisabled &&
|
||||
myBindingData &&
|
||||
item.elseDisabled !== myBindingData.rowStat) ||
|
||||
false
|
||||
"
|
||||
:readonly="
|
||||
item.readonly ||
|
||||
(item.elseReadonly &&
|
||||
myBindingData &&
|
||||
item.elseReadonly !== myBindingData.rowStat) ||
|
||||
false
|
||||
"
|
||||
:required="item.required || false"
|
||||
:maxlength="item.maxlength"
|
||||
@input="modifyValue($event, item.valueNm)"
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
|
||||
<label for="" class="search-box-label px-1">
|
||||
({{ InputValue.length }} / {{ item.lengthCheck.maxLength }})
|
||||
</label>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId].rowGridSelectData;
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData]
|
||||
.rowGridSelectData;
|
||||
}
|
||||
},
|
||||
}),
|
||||
InputValue: {
|
||||
get() {
|
||||
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('getValue', {
|
||||
key: this.item.valueNm,
|
||||
value: value,
|
||||
});
|
||||
return value;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
}),
|
||||
modifyValue(v, n) {
|
||||
const dt = {
|
||||
columnName: n,
|
||||
value: v,
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
this.setPageData({ [n] : v})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user