init dev-push code ui base design

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

View File

@ -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>