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

@ -515,6 +515,3 @@ function numberFormatter({ value }) {
}
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,73 +3,50 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="4">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'시스템구분'"
dataKey="sysDivCd"
:sendParam="{ commGrpCd: 'CO_SYSDIV', useFg: '1' }"
:addAll="true"
/>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'시스템구분'"
dataKey="sysDivCd" :sendParam="{ commGrpCd: 'CO_SYSDIV', useFg: '1' }" :addAll="true"
:customClass="'select-large'" />
</v-col>
<v-col :cols="4">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'사용여부'"
:dataKey="'useFg'"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
/>
<v-col :cols="3">
<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
:dataKey="'useFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true"
:customClass="'select-large'" />
</v-col>
<v-col :cols="4" class="text-right">
<v-btn :ripple="false" @click="search()">조회</v-btn>
<v-col :cols="6" 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="4" class="h100">
<v-row ref="contents" class="mt-4">
<v-col :cols="6" class="h100">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0">메뉴 리스트</v-card-title>
<div>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:btnActionsFnc="btnActions"
/>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
</div>
</div>
<div class="h100 px-5" style="height:calc(100% - 70px)">
<div class="h100 px-4" style="height:calc(100% - 70px)">
<div ref="treeGridParent" class="w100 h100">
<component
:ref="gridName + myPrgmId"
:is="loadTree ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
/>
<component :ref="gridName + myPrgmId" :is="loadTree ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" />
</div>
</div>
</v-card>
</v-col>
<v-col :cols="8" class="h100">
<v-col :cols="6" class="h100">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0">메뉴 상세</v-card-title>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<component
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<div class="px-4 py-2" style="height:calc(100% - 76px)">
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
@gridEditingFinish="gridEditingFinish" />
</div>
</v-card>
</v-col>
@ -82,6 +59,7 @@ import Utility from '~/plugins/utility';
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Buttons from '~/components/common/button/Buttons';
import BtnSearch from '~/components/common/button/BtnSearch';
import selectCodeList from '@/components/common/select/selectCodeList';
import Form from '~/components/common/form/Form';
@ -107,14 +85,27 @@ export default {
Buttons,
selectCodeList,
Form,
BtnSearch
},
data() {
return {
myPrgmId: myPrgmId,
gridName: 'treeGrid',
loadTree: false,
loadTree: true,
detailList: myDetail,
addRowFg: false,
dataPathExample: {
"treeGrid": {
data: sampleData,
column: [
{ header: '메뉴명', name: 'menuNm' },
{ header: 'prgmId ', name: 'prgmId', hidden: true },
{ header: 'sysDivCd ', name: 'sysDivCd', hidden: true },
],
option: myOptions,
}
}
};
},
computed: {
@ -218,8 +209,8 @@ export default {
item.upMenuId && item.upMenuId != '0'
? item.upMenuId
: item.upMenuId == '0'
? '0'
: 'ROOT',
? '0'
: 'ROOT',
};
return newItem;
});
@ -239,12 +230,12 @@ export default {
//rowKey: 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName + this.myPrgmId].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
this.$refs[this.gridName + this.myPrgmId].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnName: 'menuNm',
setScroll: true,
});
@ -371,6 +362,63 @@ const defaultData = {
},
},
};
const sampleData = [
{
"menuNm": "root",
"prgmId": "PRGM001",
"sysDivCd": "SYS01",
"_children": [
{
"menuNm": "서울 본사 - 1층",
"prgmId": "PRGM001-1",
"sysDivCd": "SYS01"
},
{
"menuNm": "서울 본사 - 2층",
"prgmId": "PRGM001-2",
"sysDivCd": "SYS01"
}
]
},
{
"menuNm": "부산 지사",
"prgmId": "PRGM002",
"sysDivCd": "SYS02",
"_children": [
{
"menuNm": "부산 지사 - A동",
"prgmId": "PRGM002-A",
"sysDivCd": "SYS02",
"_children": [
{
"menuNm": "부산 지사 - A동 1층",
"prgmId": "PRGM002-A1",
"sysDivCd": "SYS02"
}
]
}
]
},
{
"menuNm": "대전 창고",
"prgmId": "PRGM003",
"sysDivCd": "SYS03"
}
]
;
const myOptions = {
columnOptions: {
resizable: true,
},
treeColumnOptions: {
name: 'menuNm',       // Showing tree table
useIcon: false,      // Not using icon
indentWidth: 10,
},
}
const myDetail = [
{
type: 'InputText',
@ -378,7 +426,10 @@ const myDetail = [
valueNm: 'menuId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: false,
placeholder: '시스템 자동입력',
},
@ -388,7 +439,10 @@ const myDetail = [
valueNm: 'upMenuId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
required: true,
},
{
@ -397,7 +451,10 @@ const myDetail = [
valueNm: 'menuNm',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -406,7 +463,10 @@ const myDetail = [
valueNm: 'prgmId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
},
{
type: 'SelectBox',
@ -414,7 +474,9 @@ const myDetail = [
valueNm: 'sysDivCd',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
list: 'sysDivCdList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -425,7 +487,10 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
value: { '1': true, '0': false },
required: true,
},
@ -435,7 +500,10 @@ const myDetail = [
valueNm: 'sortSeq',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -444,7 +512,10 @@ const myDetail = [
valueNm: 'regUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -453,7 +524,10 @@ const myDetail = [
valueNm: 'regDttm',
disabled: true,
cols: 6,
class: 'py-2',
clabelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -462,7 +536,10 @@ const myDetail = [
valueNm: 'procUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -471,11 +548,11 @@ const myDetail = [
valueNm: 'procDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -827,6 +827,3 @@ function numberFormatter({ value }) {
}
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,7 +3,7 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row>
<v-col :cols="3">
<component
:is="'InputText'"
@ -11,6 +11,8 @@
valueNm="roleId"
label="역할코드"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3">
@ -20,6 +22,8 @@
valueNm="roleNm"
label="역할명"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3">
@ -30,10 +34,13 @@
:dataKey="'useFg'"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3" class="text-right">
<v-btn :ripple="false" @click="search()">조회</v-btn>
<v-col :cols="3" class="d-flex align-end justify-end text-right">
<!-- <v-btn :ripple="false" @click="search()">조회</v-btn> -->
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
@ -60,6 +67,7 @@
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -93,6 +101,7 @@ import Buttons from '~/components/common/button/Buttons';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '@/components/common/input/InputText';
import Form from '~/components/common/form/Form';
import BtnSearch from '~/components/common/button/BtnSearch';
let myTitle;
let myPrgmId;
@ -112,6 +121,7 @@ export default {
closable: true,
},
components: {
BtnSearch,
Grid,
Buttons,
selectCodeList,
@ -122,8 +132,22 @@ export default {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
detailList: myDetail,
dataPathMock : {
rowGrid: {
column: [
{ header: '추가 정보 그룹', name: 'addGrpId', align: 'left' },
{ header: '추가 정보 ID', name: 'addInfoId', align: 'left' },
{ header: '추가 정보 명', name: 'addInfoNm', align: 'left' },
{ header: 'Data 형식', name: 'addInfoDataKind', align: 'center' },
{ header: '사용여부', name: 'useFg', align: 'center' },
],
data: dataMockExample,
defaultRow: dataMockExample,
option: {},
},
},
};
},
computed: {
@ -394,7 +418,10 @@ const myDetail = [
valueNm: 'roleId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
required: false,
placeholder: '시스템 자동입력',
},
@ -404,7 +431,10 @@ const myDetail = [
valueNm: 'roleNm',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
required: true,
},
{
@ -413,7 +443,10 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
value: { '1': true, '0': false },
required: true,
},
@ -423,7 +456,10 @@ const myDetail = [
valueNm: 'rmrk',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
},
// {
// type: "InputText",
@ -439,7 +475,10 @@ const myDetail = [
valueNm: 'regUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
placeholder: '시스템 자동입력',
},
{
@ -448,7 +487,10 @@ const myDetail = [
valueNm: 'regDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
placeholder: '시스템 자동입력',
},
{
@ -457,7 +499,10 @@ const myDetail = [
valueNm: 'procUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
placeholder: '시스템 자동입력',
},
{
@ -466,11 +511,50 @@ const myDetail = [
valueNm: 'procDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
placeholder: '시스템 자동입력',
},
];
const dataMockExample = [
{
addGrpId: 'GRP001',
addInfoId: 'INFO001',
addInfoNm: '온도 센서',
addInfoDataKind: 'DATA01',
useFg: true,
},
{
addGrpId: 'GRP002',
addInfoId: 'INFO002',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA02',
useFg: false,
},
{
addGrpId: 'GRP003',
addInfoId: 'INFO003',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA03',
useFg: false,
},
{
addGrpId: 'GRP004',
addInfoId: 'INFO004',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA04',
useFg: false,
},
{
addGrpId: 'GRP005',
addInfoId: 'INFO005',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA05',
useFg: false,
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -1037,6 +1037,3 @@ function sha512(str) {
.digest('hex');
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>