init dev-push code ui base design
This commit is contained in:
@ -3,227 +3,142 @@
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="6">
|
||||
<InputText
|
||||
:labelCols="2"
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="지표명"
|
||||
valueNm="searchEffcIdxNm"
|
||||
:searchOption="true"
|
||||
/>
|
||||
<v-row align="end" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<InputText :labelCols="12" :textCols="12" :parentPrgmId="myPrgmId" label="지표명"
|
||||
valueNm="searchEffcIdxNm" :searchOption="true" :customClass="'input-large fixed-width'"
|
||||
:iconShow="true" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="text-right">
|
||||
<BtnSearch @click="search" />
|
||||
<v-col :cols="9" class="text-right">
|
||||
<BtnSearch @click="search" size="large" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-col :cols="3" style="height:100%">
|
||||
<v-col :cols="5" style="height:100%">
|
||||
<v-card class="pb-5">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0 custom-title-4"
|
||||
>효율지표 리스트</v-card-title
|
||||
>
|
||||
<Buttons
|
||||
:parentPrgmId="myPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
<div class="d-flex align-center justify-space-between pa-4">
|
||||
<v-card-title class="pa-0 custom-title-4">효율지표 리스트</v-card-title>
|
||||
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
|
||||
</div>
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<div class="px-4" style="height:calc(100% - 76px)">
|
||||
<div ref="gridParent" id="gridParent" class="w100 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="myPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:preventFocusChangeEventFlag="false"
|
||||
/>
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
|
||||
:parentPrgmId="myPrgmId" @getRowsData="getRowData" :preventFocusChangeEventFlag="false"
|
||||
:dataPath="dataPathExample" />
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col :cols="9" style="height:100%">
|
||||
<v-col :cols="7" style="height:100%">
|
||||
<v-card class="pb-5">
|
||||
<v-card-title class="custom-title-4" style="min-height:76px;"
|
||||
>효율지표 상세
|
||||
<v-card-title class="custom-title-4 pa-4 pb-2">효율지표 상세
|
||||
</v-card-title>
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<div class="px-4" style="height:calc(100% - 76px)">
|
||||
<v-tabs v-model="tab">
|
||||
<v-tab
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:disabled="
|
||||
(item.id == 'EffcIdxAddInfoTab'
|
||||
? isInfoTabDisabled
|
||||
: false) || item.disabledFlag
|
||||
"
|
||||
>
|
||||
<v-tab v-for="item in items" :key="item.id" :disabled="(item.id == 'EffcIdxAddInfoTab'
|
||||
? isInfoTabDisabled
|
||||
: false) || item.disabledFlag
|
||||
">
|
||||
{{ item.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-tabs-items
|
||||
v-model="tab"
|
||||
style="height: calc(100% - 65px);"
|
||||
class="py-6"
|
||||
>
|
||||
<v-tabs-items v-model="tab" class="py-6">
|
||||
<v-tab-item v-for="(item, idx) in items" :key="item.id">
|
||||
<v-row v-if="item.id == 'EffcIdxInfoTab'">
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
ref="effcIdxId"
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="효율지표 ID"
|
||||
valueNm="effcIdxId"
|
||||
:required="true"
|
||||
:readonly="true"
|
||||
placeholder="시스템 자동입력"
|
||||
/>
|
||||
<v-row v-if="item.id == 'EffcIdxInfoTab'" class="form-row no-gutters">
|
||||
<v-col :cols="6" class="py-3 pr-4">
|
||||
<InputText ref="effcIdxId" :parentPrgmId="myPrgmId" label="효율지표 ID"
|
||||
valueNm="effcIdxId" :required="true" :readonly="true" placeholder="시스템 자동입력"
|
||||
:iconShow="true" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
ref="effcIdxNm"
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="효율지표 명"
|
||||
valueNm="effcIdxNm"
|
||||
:required="true"
|
||||
/>
|
||||
<v-col :cols="6" class="py-3 pl-4">
|
||||
<InputText ref="effcIdxNm" :parentPrgmId="myPrgmId" label="효율지표 명"
|
||||
valueNm="effcIdxNm" :required="true" :iconShow="true" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'적용최소범위'"
|
||||
:required="true"
|
||||
:textCols="7"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
<v-col :cols="6" class="py-3 pr-4">
|
||||
<component :is="'SelectBox'" :propsValue="selectValue01"
|
||||
:itemList="selectValueList01" :label="'적용최소범위'" :required="true"
|
||||
:textCols="12" :labelCols="12"
|
||||
@update:propsValue="selectValue01 = $event" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'상위집계방법'"
|
||||
:required="true"
|
||||
:textCols="7"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
<v-col :cols="6" class="py-3 pl-4">
|
||||
<component :is="'SelectBox'" :propsValue="selectValue02"
|
||||
:itemList="selectValueList02" :label="'상위집계방법'" :required="true"
|
||||
:textCols="12" :labelCols="12"
|
||||
@update:propsValue="selectValue02 = $event" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue03"
|
||||
:itemList="selectValueList03"
|
||||
:label="'효율지표종류'"
|
||||
:required="true"
|
||||
:textCols="7"
|
||||
@update:propsValue="selectValue03 = $event"
|
||||
/>
|
||||
<v-col :cols="6" class="py-3 pr-4">
|
||||
<component :is="'SelectBox'" :propsValue="selectValue03"
|
||||
:itemList="selectValueList03" :label="'효율지표종류'" :required="true"
|
||||
:textCols="12" :labelCols="12"
|
||||
@update:propsValue="selectValue03 = $event" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue04"
|
||||
:itemList="selectValueList04"
|
||||
:label="'단위'"
|
||||
:textCols="7"
|
||||
:required="true"
|
||||
@update:propsValue="selectValue04 = $event"
|
||||
/>
|
||||
<v-col :cols="6" class="py-3 pl-4">
|
||||
<component :is="'SelectBox'" :propsValue="selectValue04"
|
||||
:itemList="selectValueList04" :label="'단위'" :textCols="12" :labelCols="12"
|
||||
:required="true" @update:propsValue="selectValue04 = $event" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<CheckBox
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="사용여부"
|
||||
valueNm="useFg"
|
||||
:required="true"
|
||||
/>
|
||||
<v-col :cols="6" class="py-3 pr-4">
|
||||
<CheckBox :parentPrgmId="myPrgmId" label="사용여부" valueNm="useFg"
|
||||
:required="true" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
ref="sortSeq"
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="정렬순번"
|
||||
valueNm="sortSeq"
|
||||
:required="true"
|
||||
/>
|
||||
<v-col :cols="6" class="py-3 pl-4">
|
||||
<InputText ref="sortSeq" :parentPrgmId="myPrgmId" label="정렬순번" valueNm="sortSeq"
|
||||
:required="true" />
|
||||
</v-col>
|
||||
<v-col v-if="!checkCalc" :cols="6" class="py-2">
|
||||
<component
|
||||
ref="EqpmCalcPop"
|
||||
:is="'EqpmCalcPop'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:item="calcItem"
|
||||
:labelContent="'계산코드'"
|
||||
:openMode="'E'"
|
||||
:modalTitle="'계산코드'"
|
||||
/>
|
||||
<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
|
||||
<component ref="EqpmCalcPop" :is="'EqpmCalcPop'" :parentPrgmId="myPrgmId"
|
||||
:item="calcItem" :labelContent="'계산코드'" :openMode="'E'" :modalTitle="'계산코드'"
|
||||
:textCols="12" :labelCols="12" />
|
||||
</v-col>
|
||||
<v-col v-if="!checkCalc" :cols="12" class="py-2">
|
||||
<component
|
||||
:is="'TextArea'"
|
||||
ref="calcDesc"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:item="calcDescItem"
|
||||
/>
|
||||
<v-col :cols="6" class="py-3">
|
||||
|
||||
</v-col>
|
||||
<v-col v-if="!checkCalc" :cols="2" class="py-2">
|
||||
<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
|
||||
<component :is="'TextArea'" ref="calcDesc" :parentPrgmId="myPrgmId"
|
||||
:item="calcDescItem" :textCols="12" :labelCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-3">
|
||||
|
||||
</v-col>
|
||||
<v-col v-if="!checkCalc" :cols="12" class="py-3">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small :color="'#fb8200'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
계산 Agument
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col v-if="!checkCalc" :cols="6" class="py-2">
|
||||
<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
|
||||
<div>
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue05"
|
||||
:itemList="selectValueList05"
|
||||
:label="'효율지표ID1'"
|
||||
:iconShow="false"
|
||||
:disabled="checkCalc"
|
||||
@update:propsValue="selectValue05 = $event"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="effcIdxId2"
|
||||
:propsValue="selectValue06"
|
||||
:itemList="selectValueList06"
|
||||
:label="'효율지표ID2'"
|
||||
:iconShow="false"
|
||||
:disabled="effcIdxId2Disabled"
|
||||
@update:propsValue="selectValue06 = $event"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="effcIdxId3"
|
||||
:propsValue="selectValue07"
|
||||
:itemList="selectValueList07"
|
||||
:label="'효율지표ID3'"
|
||||
:iconShow="false"
|
||||
:disabled="effcIdxId3Disabled"
|
||||
@update:propsValue="selectValue07 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" :propsValue="selectValue05"
|
||||
:itemList="selectValueList05" :label="'효율지표ID1'" :iconShow="false"
|
||||
:disabled="checkCalc" @update:propsValue="selectValue05 = $event"
|
||||
:textCols="12" :labelCols="12" />
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col v-if="!checkCalc" :cols="6" class="py-3 pl-4">
|
||||
<div>
|
||||
<component :is="'SelectBox'" ref="effcIdxId2" :propsValue="selectValue06"
|
||||
:itemList="selectValueList06" :label="'효율지표ID2'" :iconShow="false"
|
||||
:disabled="effcIdxId2Disabled"
|
||||
@update:propsValue="selectValue06 = $event" :textCols="12"
|
||||
:labelCols="12" />
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
|
||||
<div>
|
||||
<component :is="'SelectBox'" ref="effcIdxId3" :propsValue="selectValue07"
|
||||
:itemList="selectValueList07" :label="'효율지표ID3'" :iconShow="false"
|
||||
:disabled="effcIdxId3Disabled"
|
||||
@update:propsValue="selectValue07 = $event" :textCols="12"
|
||||
:labelCols="12" />
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
<EffcIdxAddInfoTab
|
||||
v-if="item.id == 'EffcIdxAddInfoTab'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:innerTabGridInfo="{ tab, idx }"
|
||||
/>
|
||||
<EffcIdxAddInfoTab v-if="item.id == 'EffcIdxAddInfoTab'" :parentPrgmId="myPrgmId"
|
||||
:innerTabGridInfo="{ tab, idx }" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</div>
|
||||
@ -235,7 +150,7 @@
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
|
||||
@ -246,7 +161,7 @@ import EffcIdxAddInfoTab from '@/components/pages/ems/EffcIdxInfo/EffcIdxAddInfo
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Utility from '~/plugins/utility';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
import CheckBox from '~/components/common/CheckBox';
|
||||
import CheckBox from '~/components/common/checkbox/CheckBox';
|
||||
import EqpmCalcPop from '~/components/common/modal/EqpmCalcPop';
|
||||
import TextArea from '@/components/common/form/TextArea';
|
||||
|
||||
@ -254,7 +169,7 @@ let myTitle;
|
||||
// const myPrgmId = "PRG0012";
|
||||
let myPrgmId;
|
||||
export default {
|
||||
mixins: [mixinGlobal,resize],
|
||||
mixins: [mixinGlobal, resize],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
|
||||
@ -297,7 +212,66 @@ export default {
|
||||
disabledFlag: false,
|
||||
},
|
||||
],
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
dataPathExample: {
|
||||
"effcIdxGrid": {
|
||||
data: [
|
||||
{
|
||||
"effcIdxId": "E001",
|
||||
"effcIdxNm": "에너지 소비 효율",
|
||||
"effcKind": "환경"
|
||||
},
|
||||
{
|
||||
"effcIdxId": "E002",
|
||||
"effcIdxNm": "작업 시간 대비 생산량",
|
||||
"effcKind": "생산성"
|
||||
},
|
||||
{
|
||||
"effcIdxId": "E003",
|
||||
"effcIdxNm": "장비 가동률",
|
||||
"effcKind": "운영"
|
||||
},
|
||||
{
|
||||
"effcIdxId": "E004",
|
||||
"effcIdxNm": "불량률",
|
||||
"effcKind": "품질"
|
||||
},
|
||||
{
|
||||
"effcIdxId": "E005",
|
||||
"effcIdxNm": "재고 회전율",
|
||||
"effcKind": "물류"
|
||||
}
|
||||
]
|
||||
,
|
||||
column: [
|
||||
{
|
||||
header: '효율지표 ID',
|
||||
name: 'effcIdxId',
|
||||
align: 'center',
|
||||
// hidden:true
|
||||
},
|
||||
{
|
||||
header: '효율지표명',
|
||||
name: 'effcIdxNm',
|
||||
align: 'left',
|
||||
minWidth: 150,
|
||||
// hidden:true
|
||||
},
|
||||
|
||||
{
|
||||
header: '효율지표종류',
|
||||
name: 'effcKind',
|
||||
align: 'left',
|
||||
// hidden: true,
|
||||
},
|
||||
// { header: '등록 사용자', name: 'regUserNo', hidden: true },
|
||||
// { header: '등록 일자', name: 'regDttm', hidden: true },
|
||||
// { header: '수정 사용자', name: 'procUserNo', hidden: true },
|
||||
// { header: '수정 일자', name: 'procDttm', hidden: true },
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
initFlag: false,
|
||||
selectValueList01: [],
|
||||
selectValueList02: [],
|
||||
@ -327,10 +301,11 @@ export default {
|
||||
required: true,
|
||||
label: '계산설명',
|
||||
cols: 12,
|
||||
textCols: 12,
|
||||
},
|
||||
effcIdxId2Disabled: true,
|
||||
effcIdxId3Disabled: true,
|
||||
checkCalc: true,
|
||||
checkCalc: false,
|
||||
thisArgCnt: '',
|
||||
isInfoTabDisabled: false,
|
||||
effcKindInitData: null,
|
||||
@ -711,7 +686,7 @@ export default {
|
||||
|
||||
//
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
beforeDestroy() {
|
||||
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
|
||||
},
|
||||
@ -1088,10 +1063,10 @@ export default {
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
this.loadGrid = true;
|
||||
this.loadGrid = true;
|
||||
this.$nextTick(() => {
|
||||
let rowGridData = {};
|
||||
if(this.pageData.rowGridSelectData != null){
|
||||
if (this.pageData.rowGridSelectData != null) {
|
||||
// grid Row에서 pk값으로 설정 -> effcIdxId
|
||||
let lastGridRowPk = this.pageData.rowGridSelectData.effcIdxId;
|
||||
let gridData = this.$refs[this.gridName].getData();
|
||||
@ -1105,14 +1080,14 @@ export default {
|
||||
//rowKey: 0,
|
||||
rowKey:
|
||||
this.pageData.rowGridSelectKey == '' ||
|
||||
this.pageData.rowGridSelectKey == null
|
||||
this.pageData.rowGridSelectKey == null
|
||||
? 0
|
||||
// : this.pageData.rowGridSelectKey ==
|
||||
// this.$refs[this.gridName].getData().length - 1
|
||||
// ? this.pageData.rowGridSelectKey
|
||||
: rowGridData != undefined
|
||||
? rowGridData.rowKey
|
||||
: 0,
|
||||
? rowGridData.rowKey
|
||||
: 0,
|
||||
setScroll: true,
|
||||
});
|
||||
} catch (error) {
|
||||
@ -1266,36 +1241,36 @@ export default {
|
||||
item.calcProc,
|
||||
'계산코드를 선택해주세요',
|
||||
item.effcKind == 'CALC' &&
|
||||
(item.calcProc == '' || item.calcProc == null),
|
||||
(item.calcProc == '' || item.calcProc == null),
|
||||
) ||
|
||||
validationCheck(
|
||||
item.calcDesc,
|
||||
'계산설명을 입력해주세요',
|
||||
item.effcKind == 'CALC' &&
|
||||
(item.calcDesc == '' || item.calcDesc == null),
|
||||
(item.calcDesc == '' || item.calcDesc == null),
|
||||
) ||
|
||||
validationCheck(
|
||||
item.effcIdxId1,
|
||||
'효율지표ID1을 선택해주세요',
|
||||
item.effcKind == 'CALC' &&
|
||||
(item.effcIdxId1 == '' || item.effcIdxId1 == null),
|
||||
(item.effcIdxId1 == '' || item.effcIdxId1 == null),
|
||||
) ||
|
||||
validationCheck(
|
||||
item.effcIdxId2,
|
||||
'효율지표ID2를 입력해주세요',
|
||||
item.effcKind == 'CALC' &&
|
||||
item.argCnt > 1 &&
|
||||
item.effcIdxId1 != null &&
|
||||
item.effcIdxId1 != null &&
|
||||
(item.effcIdxId2 == '' || item.effcIdxId2 == null),
|
||||
item.argCnt > 1 &&
|
||||
item.effcIdxId1 != null &&
|
||||
item.effcIdxId1 != null &&
|
||||
(item.effcIdxId2 == '' || item.effcIdxId2 == null),
|
||||
) ||
|
||||
validationCheck(
|
||||
item.effcIdxId3,
|
||||
'효율지표ID3을 입력해주세요',
|
||||
item.effcKind == 'CALC' &&
|
||||
item.argCnt > 2 &&
|
||||
item.effcIdxId2 != null &&
|
||||
(item.effcIdxId3 == '' || item.effcIdxId3 == null),
|
||||
item.argCnt > 2 &&
|
||||
item.effcIdxId2 != null &&
|
||||
(item.effcIdxId3 == '' || item.effcIdxId3 == null),
|
||||
)
|
||||
// item.effcKind == 'CALC' ? (item.calcProc == '' || item.calcProc == null) ? true : false : false
|
||||
// item.effcKind == 'CALC' ? (item.calcDesc == '' || item.calcDesc == null ? true : false) : false ||
|
||||
@ -1462,6 +1437,8 @@ const defaultData = {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.v-input__custom.surface-name fieldset {
|
||||
width: 345px;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user