init dev-push code ui base design
This commit is contained in:
leonard
@ -1,25 +1,24 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" cols="4">
|
||||
<v-row class="search-box" align="center" >
|
||||
<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
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? 7 : ''">
|
||||
<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'"
|
||||
:color="isDarkMode ? '#fff' : '#1890ff'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-row no-gutters>
|
||||
<v-row class="form-row">
|
||||
<template v-for="(item, index) in detailList">
|
||||
<v-col
|
||||
v-if="!item.showValue"
|
||||
@ -44,6 +44,7 @@ import EgrpPysclQtyPop from '../modal/EgrpPysclQtyPop';
|
||||
import EqpmCalcPop from '../modal/EqpmCalcPop';
|
||||
import EqpmBaseInfoPop from '../modal/EqpmBaseInfoPop';
|
||||
import InputTextReg from './InputTextReg';
|
||||
import CustomInput from '../../form/CustomInput.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -87,7 +88,8 @@ export default {
|
||||
EgrpPysclQtyPop,
|
||||
EqpmCalcPop,
|
||||
EqpmBaseInfoPop,
|
||||
InputTextReg
|
||||
InputTextReg,
|
||||
CustomInput
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,18 +1,22 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col v-if="item.label"
|
||||
:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
|
||||
class="py-0"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? 7 : ''">
|
||||
<v-col v-if="!item.hideText"
|
||||
:cols="item.textCols !== undefined ? item.textCols : item.label ? 8 : ''" class="py-0">
|
||||
<!-- v-model="InputValue" -->
|
||||
<v-text-field
|
||||
v-model="textValue"
|
||||
|
||||
@ -1,56 +1,39 @@
|
||||
<template>
|
||||
<v-row v-if="!item.showValue" class="search-box" align="center" no-gutters>
|
||||
<v-row v-if="!item.showValue" class="search-box" align="center">
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
>
|
||||
class="py-0"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</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 class="py-0" v-if="!item.hideText" :cols="item.textCols !== undefined ? item.textCols : item.label ? 8 : ''" :style="item.noText ? 'padding-top:0px' : ''">
|
||||
<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">
|
||||
|
||||
@ -1,28 +1,22 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.labelCols">
|
||||
<v-row class="search-box" align="center" >
|
||||
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
|
||||
<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
|
||||
<v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>
|
||||
$icoBulletPoint
|
||||
</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 :cols="item.label ? item.textCols : ''" class="py-0">
|
||||
<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>
|
||||
@ -74,7 +68,7 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
search() {
|
||||
@ -82,22 +76,22 @@ export default {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
inputEvent(str,n){
|
||||
inputEvent(str, n) {
|
||||
var temp = str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣\s]*/i)[0];
|
||||
var regExp = /[^a-z]*/;
|
||||
temp = temp.match(regExp)[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)
|
||||
columnName: n,
|
||||
value: this.newValue(this.$refs.formRef.lazyValue)
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
},
|
||||
keydownEvent($event){
|
||||
keydownEvent($event) {
|
||||
|
||||
},
|
||||
keyupEvent($event){
|
||||
|
||||
keyupEvent($event) {
|
||||
|
||||
},
|
||||
newValue(value) {
|
||||
let returnVal = value.trim();
|
||||
|
||||
@ -1,35 +1,31 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
cols="4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
>
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col v-if="item.label" :cols="item.label ? (item.textCols ? item.textCols : 4) : ''"
|
||||
:style="item.padding ? 'padding-left:10px' : ''" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</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"
|
||||
<v-col :cols="item.label ? (item.textCols ? item.textCols : 8) : ''" class="py-0">
|
||||
<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>
|
||||
:item-value="typeof item.list != 'string' ? 'value' : item.itemValue" outlined :hide-details="true"
|
||||
class="v-select__custom" :disabled="item.disabled || false" :readonly="item.readonly || false"
|
||||
:required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon="">
|
||||
|
||||
<template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
|
||||
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -60,21 +56,25 @@ export default {
|
||||
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;
|
||||
try{
|
||||
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;
|
||||
}catch(err) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {
|
||||
...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
|
||||
modifyValue(v, n) {
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
v-if="item.label"
|
||||
:cols="item.cols == 12 ? 2 : 4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
class="mb-2"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
@ -41,6 +41,7 @@
|
||||
:required="item.required || false"
|
||||
:maxlength="item.maxlength"
|
||||
@input="modifyValue($event, item.valueNm)"
|
||||
outlined
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
|
||||
|
||||
Reference in New Issue
Block a user