sk_fems_ui commit
This commit is contained in:
unknown
432
pages/comm/base/BatchLogMngPage.vue
Normal file
432
pages/comm/base/BatchLogMngPage.vue
Normal file
@ -0,0 +1,432 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<!-- 조회조견 -->
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="배치ID"
|
||||
valueNm="batchId"
|
||||
:searchOption="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="배치명"
|
||||
valueNm="batchNm"
|
||||
:searchOption="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<component
|
||||
:is="'selectCodeList'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'실행 결과'"
|
||||
:dataKey="'execRsltCd'"
|
||||
:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
|
||||
:addAll="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<component
|
||||
:is="'Datepicker'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'조회기간'"
|
||||
/>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col :cols="4" class="text-right">
|
||||
<BtnSearch />
|
||||
<BtnExcelDownload :parentPrgmId="myPrgmId" :gridName="gridName" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row ref="contents">
|
||||
<!-- 배치 리스트 -->
|
||||
<v-col :cols="12" style="height:50%">
|
||||
<v-card class="pb-5 h100">
|
||||
<v-card-title>배치 리스트</v-card-title>
|
||||
<div class="h100" style="height:calc(100% - 70px)">
|
||||
<div ref="gridParent" class="px-5 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:gridName="gridName"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- 배치 상세 -->
|
||||
<v-col :cols="12" style="height:50%">
|
||||
<v-card class="pb-5 h100">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">배치 상세</v-card-title>
|
||||
</div>
|
||||
<div style="height:calc(100% - 50px)">
|
||||
<div ref="gridParent" class="px-5 h100">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:detailList="detailList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
// import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
import Datepicker from '@/components/common/Datepicker';
|
||||
import InputText from '@/components/common/input/InputText';
|
||||
import TextArea from '@/components/common/form/TextArea';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Form from '~/components/common/form/Form';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
export default {
|
||||
mixins: [mixinGlobal, resize],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
selectCodeList,
|
||||
Datepicker,
|
||||
InputText,
|
||||
TextArea,
|
||||
Form,
|
||||
Grid,
|
||||
BtnSearch,
|
||||
BtnExcelDownload,
|
||||
Buttons,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
loadGrid: false,
|
||||
gridName: 'rowGrid',
|
||||
// rowGridOrigin: [],
|
||||
detailList: myDetail,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// ...mapState({
|
||||
// pageData: state => state.pageData[myPrgmId]
|
||||
// }),
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
chkExecRsltCd() {
|
||||
// 배치 실행 결과 선택 감지
|
||||
return this.pageData.execRsltCd;
|
||||
},
|
||||
chkRowGridSelectKey() {
|
||||
return this.pageData.rowGridSelectKey;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkExecRsltCd() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.userComId = this.userInfo.comId;
|
||||
this.init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
|
||||
},
|
||||
methods: {
|
||||
// ...mapMutations({
|
||||
// setPageData: "setPageData",
|
||||
// setGridData: "setGridData",
|
||||
// setGridColumn: "setGridColumn",
|
||||
// setGridOption: "setGridOption"
|
||||
// }),
|
||||
// ...mapActions({
|
||||
// postApi: "modules/list/postApi",
|
||||
// postUpdateApi: "modules/list/postUpdateApi",
|
||||
// postApiReturn: "modules/list/postApiReturn",
|
||||
// setTree: "modules/list/setTree",
|
||||
// chkOpenTabList: "chkOpenTabList"
|
||||
// }),
|
||||
init() {
|
||||
// this.layoutInit();
|
||||
this.gridInit();
|
||||
},
|
||||
// layoutInit() {
|
||||
// const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
|
||||
// this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
|
||||
// },
|
||||
gridInit() {
|
||||
this.loadGrid = false;
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
|
||||
const myOptions = {
|
||||
scrollX: false,
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
// value: myOptions
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
{ header: 'No.', name: 'batchLogSeq', align: 'center', width: 100 },
|
||||
{ header: '배치ID', name: 'batchId', align: 'center', width: 100 },
|
||||
{ header: '배치명', name: 'batchNm', align: 'left', width: 150 },
|
||||
{ header: '실행 일자', name: 'execDt', align: 'center', width: 80 },
|
||||
{
|
||||
header: '실행 결과',
|
||||
name: 'execRsltCd',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
formatter({ value }) {
|
||||
let retVal = '';
|
||||
const newValue = _this.pageData.execRsltCdList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
if (newValue.length > 0) {
|
||||
retVal = newValue[0].commCdNm;
|
||||
}
|
||||
return retVal;
|
||||
},
|
||||
}, // "1": 프로그램, "2": 팝업
|
||||
{ header: '실행 로그', name: 'execLogCont', minWidth: 150 },
|
||||
{
|
||||
header: '배치 시작 일시',
|
||||
name: 'batchStrtDttm',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
header: '배치 종료 일시',
|
||||
name: 'batchEndDttm',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
},
|
||||
{ header: '등록자NO', name: 'regUserNo', width: 120 },
|
||||
{ header: '등록일시', name: 'regDttm', align: 'center', width: 160 },
|
||||
{ header: '수정자NO', name: 'procUserNo', width: 120 },
|
||||
{ header: '수정일시', name: 'procDttm', align: 'center', width: 160 },
|
||||
];
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
// this.getRowGridData();
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
await this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getRowGridData() {
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectBatchLog',
|
||||
resKey: 'batchLogData',
|
||||
sendParam: {
|
||||
batchId: this.pageData.batchId, // 검색키워드: 배치ID
|
||||
batchNm: this.pageData.batchNm, // 검색키워드: 배치명
|
||||
execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
|
||||
fromDt: this.pageData.fromDt,
|
||||
},
|
||||
});
|
||||
const newRes = res.map(item => {
|
||||
const newObj = {
|
||||
...item,
|
||||
rowStat: null,
|
||||
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
|
||||
};
|
||||
return newObj;
|
||||
});
|
||||
|
||||
// 엑셀 다운로드용 데이터 재정렬
|
||||
this.xlsDataBind(res);
|
||||
// this.rowGridOrigin = Utility.copyObj(newRes);
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (newRes.length > 0) {
|
||||
this.$refs[this.gridName].focus({
|
||||
rowKey: this.chkRowGridSelectKey || 0,
|
||||
//rowKey: 0,
|
||||
setScroll: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async getRowData(data) {
|
||||
this.setPageData({
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: data,
|
||||
});
|
||||
},
|
||||
compareData(type, newDt) {
|
||||
if (this.selectedCommCdData[type] == newDt) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
gridEditingFinish(data) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
async btnActions(action) {
|
||||
switch (action) {
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
xlsDataBind(res) {
|
||||
const xlsRowData = res.map(item => {
|
||||
const obj = {
|
||||
...item,
|
||||
useFg: item.useFg == '1' ? '사용' : '사용안함',
|
||||
execRsltCd: this.convExecRsltNm(item.execRsltCd),
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
|
||||
this.setPageData({
|
||||
xlsFileInfo: {
|
||||
[this.gridName]: {
|
||||
rowData: xlsRowData,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
convExecRsltNm(value) {
|
||||
let retVal = '';
|
||||
const newValue = this.pageData.execRsltCdList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
if (newValue.length > 0) {
|
||||
retVal = newValue[0].commCdNm;
|
||||
}
|
||||
return retVal;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const dt = new Date();
|
||||
const defaultData = {
|
||||
/* 검색옵션 */
|
||||
execRsltCd: false,
|
||||
execRsltCdList: [],
|
||||
batchId: '',
|
||||
batchNm: '',
|
||||
|
||||
cmCycle: 'CYC_HOUR', // 주기
|
||||
|
||||
defaultRange: {
|
||||
//CYC_DAY: 7
|
||||
CYC_HOUR: 0,
|
||||
},
|
||||
fromDt: Utility.setFormatDate(dt, 'YYYYMMDD'), // 조회일자
|
||||
|
||||
isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
|
||||
|
||||
/* data 세팅 */
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
defaultRow: {
|
||||
batchLogSeq: null,
|
||||
batchId: null,
|
||||
batchNm: null,
|
||||
execDt: null,
|
||||
execRsltCd: null,
|
||||
execLogCont: null,
|
||||
batchStrtDttm: null,
|
||||
batchEndDttm: null,
|
||||
regUserNo: null,
|
||||
regDttm: null,
|
||||
procUserNo: null,
|
||||
procDttm: null,
|
||||
rowStat: null,
|
||||
},
|
||||
buttonAuth: {
|
||||
excel: true,
|
||||
},
|
||||
},
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
rowGridModify: false,
|
||||
|
||||
xlsFileInfo: {
|
||||
// 출력하려는 grid 와 같은 이름으로 세팅
|
||||
rowGrid: {
|
||||
rowData: [],
|
||||
// 엑셀변환시 데이타 가공이 추가로 필요하게 된다면 여기에 가공된 rowData 를 넣어야 할듯
|
||||
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
|
||||
sheetName: null, // 갑이 없으면 'Sheet1'
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const myDetail = [
|
||||
{
|
||||
type: 'TextArea',
|
||||
valueNm: 'execLogCont',
|
||||
readonly: true,
|
||||
cols: 12,
|
||||
class: 'py-2',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
</style>
|
||||
1111
pages/comm/base/BatchMngPage.vue
Normal file
1111
pages/comm/base/BatchMngPage.vue
Normal file
File diff suppressed because it is too large
Load Diff
545
pages/comm/base/CalendarMngPage.vue
Normal file
545
pages/comm/base/CalendarMngPage.vue
Normal file
@ -0,0 +1,545 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="2">
|
||||
<component
|
||||
:is="'SelectBlocMstr'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:sendParam="{ comId }"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<!-- <component :is="'SelectDateSolo'" :parentPrgmId="myPrgmId" /> -->
|
||||
<DatePicker :parentPrgmId="myPrgmId" :label="'조회연월'" />
|
||||
</v-col>
|
||||
<v-col cols="7" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">조회</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents" id="CalendarMngContent">
|
||||
<v-col cols="12" lg="4" class="h100">
|
||||
<v-card class="w100">
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
<span class="custom-title-4">캘린더 리스트</span>
|
||||
<Buttons
|
||||
:parentPrgmId="myPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</v-card-title>
|
||||
<v-card-actions
|
||||
class="pt-0 px-5 pb-5"
|
||||
:style="{ height: 'calc(100% - 72.56px)' }"
|
||||
>
|
||||
<div ref="gridParent" class="w100 h100">
|
||||
<component
|
||||
class="w100"
|
||||
:ref="gridName + myPrgmId"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:editorGrid="true"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="8" class="h100">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="custom-title-4">캘린더 미리보기</span>
|
||||
</v-card-title>
|
||||
<v-card-actions class="px-5" :style="{ height: 'calc(100% - 62px)' }">
|
||||
<Calendar
|
||||
:parentPrgmId="myPrgmId"
|
||||
:gridName="gridName"
|
||||
:headerVisible="false"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
|
||||
// import SelectDateSolo from "@/components/common/select/SelectDateSolo";
|
||||
import InputText from '@/components/common/input/InputText';
|
||||
import Calendar from '~/components/common/Calendar';
|
||||
import DatePicker from '~/components/common/Datepicker';
|
||||
|
||||
let myTitle;
|
||||
// const myPrgmId = "PRG0008";
|
||||
let myPrgmId;
|
||||
export default {
|
||||
mixins: [mixinGlobal, resize],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
Buttons,
|
||||
SelectBlocMstr,
|
||||
// SelectDateSolo,
|
||||
InputText,
|
||||
Calendar,
|
||||
DatePicker,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
gridName: 'rowGrid',
|
||||
loadGrid: false,
|
||||
rowKey: null,
|
||||
edtingFinishFlag: 'Y',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData: state => state.pageData[myPrgmId],
|
||||
}),
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
chkBlocCd() {
|
||||
// 사업장 선택 감지
|
||||
return this.pageData.blocId;
|
||||
},
|
||||
chkFromDt() {
|
||||
// 사업장 선택 감지
|
||||
return this.pageData.fromDt;
|
||||
},
|
||||
initFlag() {
|
||||
if (this.pageData.blocMstrList.length > 0) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkBlocCd() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
chkFromDt() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
initFlag(val) {
|
||||
if (val) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
},
|
||||
async beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
await this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setGridData: 'setGridData',
|
||||
setGridColumn: 'setGridColumn',
|
||||
setGridOption: 'setGridOption',
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
async init() {
|
||||
await this.gridInit();
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
},
|
||||
async gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), {
|
||||
scrollX: false,
|
||||
}),
|
||||
});
|
||||
|
||||
// this.getRowGridData();
|
||||
},
|
||||
// 메뉴리스트 조회
|
||||
async getRowGridData() {
|
||||
class CustomSelectBoxEditor {
|
||||
constructor(props) {
|
||||
const el = document.createElement('select');
|
||||
const option1 = document.createElement('option');
|
||||
const option2 = document.createElement('option');
|
||||
|
||||
console.log('props : ', props);
|
||||
|
||||
option1.value = '1';
|
||||
option2.value = '0';
|
||||
|
||||
option1.text = '휴일';
|
||||
option2.text = '평일';
|
||||
|
||||
option1.classList.add('calendarOption');
|
||||
option2.classList.add('calendarOption');
|
||||
el.classList.add('selectbox');
|
||||
|
||||
el.id = 'calendarSelect';
|
||||
// el.size = 2;
|
||||
el.appendChild(option1);
|
||||
el.appendChild(option2);
|
||||
|
||||
// el.options.add(option2);
|
||||
|
||||
console.log('props.value : ', props.value);
|
||||
|
||||
document
|
||||
.querySelector('#CalendarMngContent')
|
||||
.addEventListener('click', function(event) {
|
||||
if (event.target.className == 'calendarOption') {
|
||||
// el.size = 1;
|
||||
}
|
||||
});
|
||||
el.value = props.value;
|
||||
this.el = el;
|
||||
}
|
||||
|
||||
getElement() {
|
||||
return this.el;
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return this.el.value;
|
||||
}
|
||||
|
||||
mounted() {
|
||||
// this.el.focus();
|
||||
}
|
||||
}
|
||||
|
||||
const myColumns = [
|
||||
{
|
||||
header: '일자',
|
||||
name: 'dt',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
return value.split(' ')[0];
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '요일',
|
||||
name: 'dtNm',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
return value + '요일';
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '구분',
|
||||
name: 'hldyFg',
|
||||
align: 'center',
|
||||
essential: true,
|
||||
formatter({ value }) {
|
||||
return value == 1 ? '휴일' : '평일';
|
||||
},
|
||||
editor: {
|
||||
type: CustomSelectBoxEditor,
|
||||
},
|
||||
// editor: {
|
||||
// type: 'select',
|
||||
// options: {
|
||||
// listItems: [
|
||||
// { text: '휴일', value: '1' },
|
||||
// { text: '평일', value: '0' },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{ header: '휴일명', name: 'hldyNm', editor: 'text' },
|
||||
];
|
||||
|
||||
this.loadGrid = false;
|
||||
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectWorkCald',
|
||||
resKey: 'workcaldData',
|
||||
sendParam: {
|
||||
blocId: this.pageData.blocMstrList[this.chkBlocCd].blocId,
|
||||
yymm: this.chkFromDt,
|
||||
comId: this.comId,
|
||||
},
|
||||
});
|
||||
|
||||
let res2 = await this.postApiReturn({
|
||||
apiKey: 'selectWorkCaldDetl',
|
||||
resKey: 'workcaldDetlData',
|
||||
sendParam: {
|
||||
blocId: this.pageData.blocMstrList[this.chkBlocCd].blocId,
|
||||
yymm: this.chkFromDt,
|
||||
comId: this.comId,
|
||||
},
|
||||
});
|
||||
|
||||
for (var i = 0; i < res2.length; i++) {
|
||||
if (
|
||||
!(
|
||||
res2[i].hldyNm == null ||
|
||||
res2[i].hldyNm == '토요일' ||
|
||||
res2[i].hldyNm == '일요일'
|
||||
)
|
||||
) {
|
||||
for (var j = i + 1; j < res2.length; j++) {
|
||||
if (res2[i].hldyNm == res2[j].hldyNm) {
|
||||
res2[i].hldyNm = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
res = res.map(item => {
|
||||
const dt = this.$dayjs(item.dt.split(' ')[0]); // YYYY-MM-DD
|
||||
const dtNm = dt.format('ddd'); // 요일
|
||||
const newItem = {
|
||||
...item,
|
||||
dtNm: dtNm,
|
||||
hldyNm: item.hldyNm ? item.hldyNm : '',
|
||||
rowStat: null,
|
||||
};
|
||||
return newItem;
|
||||
});
|
||||
|
||||
this.loadGrid = true;
|
||||
this.setPageData({ isFind: false });
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: res,
|
||||
});
|
||||
|
||||
this.setPageData({ planData: res2 });
|
||||
|
||||
// 첫번째 row 선택상태
|
||||
this.$nextTick(() => {
|
||||
this.$refs[this.gridName + this.myPrgmId].focus({
|
||||
//rowKey: 0,
|
||||
rowKey:
|
||||
this.pageData.rowGridSelectKey == '' ||
|
||||
this.pageData.rowGridSelectKey == null
|
||||
? 0
|
||||
: this.pageData.rowGridSelectKey ==
|
||||
this.$refs[this.gridName + this.myPrgmId].getData().length - 1
|
||||
? this.pageData.rowGridSelectKey
|
||||
: 0,
|
||||
columnName: 'dt',
|
||||
setScroll: true,
|
||||
});
|
||||
this.setPageData({ isFind: false });
|
||||
});
|
||||
},
|
||||
async getRowData(data, gridName) {
|
||||
this.setGridSelectData({
|
||||
gridKey: gridName,
|
||||
gridSelect: true,
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: data,
|
||||
});
|
||||
|
||||
this.setPageData({
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: data,
|
||||
});
|
||||
|
||||
this.rowKey = data.rowKey;
|
||||
this.edtingFinishFlag = 'Y';
|
||||
},
|
||||
async btnActions(action) {
|
||||
let dataArr = [];
|
||||
switch (action) {
|
||||
case 'add':
|
||||
this.$refs[this.gridName + this.myPrgmId].addRow();
|
||||
this.edtingFinishFlag = 'Y';
|
||||
break;
|
||||
|
||||
case 'remove':
|
||||
await this.$refs[this.gridName + this.myPrgmId].editingFinish({
|
||||
rowKey: this.rowKey,
|
||||
});
|
||||
this.$refs[this.gridName + this.myPrgmId].removeRow();
|
||||
this.edtingFinishFlag = 'N';
|
||||
break;
|
||||
|
||||
case 'save':
|
||||
if (this.edtingFinishFlag == 'Y') {
|
||||
await this.$refs[this.gridName + this.myPrgmId].editingFinish({
|
||||
rowKey: this.rowKey,
|
||||
});
|
||||
}
|
||||
dataArr = this.$refs[this.gridName + this.myPrgmId].save();
|
||||
dataArr = dataArr.map(item => {
|
||||
const dt = item.dt.substr(0, 10);
|
||||
const newItem = {
|
||||
...item,
|
||||
dt: dt,
|
||||
};
|
||||
return newItem;
|
||||
});
|
||||
if (dataArr.length > 0) {
|
||||
const sendParam = {
|
||||
datas: { dsWorkcald: dataArr },
|
||||
params: {},
|
||||
};
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'saveWorkCald',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
this.setPageData({ isFind: true });
|
||||
} else {
|
||||
alert('저장할 내용이 없습니다.');
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
const dt = new Date();
|
||||
const yy = dt.getFullYear();
|
||||
const mm = dt.getMonth() + 1;
|
||||
|
||||
const defaultData = {
|
||||
isFind: false, // true 경우 조회
|
||||
|
||||
/* 검색옵션 */
|
||||
blocId: '',
|
||||
blocMstrList: [],
|
||||
|
||||
cmCycle: 'CYC_MONTH',
|
||||
fromDt: `${yy}${mm}`,
|
||||
planData: [],
|
||||
// 선택된 그룹코드 상세 데이터
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: {},
|
||||
|
||||
/* data 세팅 */
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {},
|
||||
defaultRow: {
|
||||
dt: null,
|
||||
dtNm: null,
|
||||
hldyFg: 1,
|
||||
hldyNm: null,
|
||||
rowStat: null,
|
||||
},
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: {},
|
||||
buttonAuth: {
|
||||
add: false,
|
||||
remove: false,
|
||||
save: true,
|
||||
excel: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
.selectbox:focus {
|
||||
outline: none;
|
||||
}
|
||||
.calendarOption {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select.selectbox {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%; /* 높이 초기화 */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal; /* line-height 초기화 */
|
||||
font-family: inherit; /* 폰트 상속 */
|
||||
border: 0;
|
||||
// opacity: 0; /* 숨기기 */
|
||||
// filter:alpha(opacity=0); /* IE8 숨기기 */
|
||||
// -webkit-appearance: none; /* 네이티브 외형 감추기 */
|
||||
// -moz-appearance: none;
|
||||
// appearance: none;
|
||||
opacity: 1; /* 숨기기 */
|
||||
filter: alpha(opacity=1); /* IE8 숨기기 */
|
||||
-webkit-appearance: auto; /* 네이티브 외형 감추기 */
|
||||
-moz-appearance: auto;
|
||||
appearance: auto;
|
||||
}
|
||||
|
||||
.tui-grid-layer-editing {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
// background-image: initial;
|
||||
// background-position-x: initial;
|
||||
// background-position-y: initial;
|
||||
// background-size: initial;
|
||||
// background-repeat-x: initial;
|
||||
// background-repeat-y: initial;
|
||||
// background-attachment: initial;
|
||||
// background-origin: initial;
|
||||
// background-clip: initial;
|
||||
// background-color: rgb(255, 255, 255);
|
||||
// z-index: 15;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* border-style: solid; */
|
||||
/* border-width: 1px; */
|
||||
white-space: nowrap;
|
||||
border-width: 0px;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
603
pages/comm/base/CommCdMngPage.vue
Normal file
603
pages/comm/base/CommCdMngPage.vue
Normal file
@ -0,0 +1,603 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<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-col>
|
||||
<v-col :cols="4">
|
||||
<component
|
||||
:is="'selectCodeList'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'사용여부'"
|
||||
:dataKey="'useFg'"
|
||||
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="4" class="text-right">
|
||||
<BtnSearch @click="search" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="그룹코드"
|
||||
valueNm="commGrpCd"
|
||||
:searchOption="true"
|
||||
:labelCols="4"
|
||||
:textCols="8"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="그룹코드명"
|
||||
valueNm="commGrpCdNm"
|
||||
:searchOption="true"
|
||||
:labelCols="4"
|
||||
:textCols="8"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-col :cols="5" class="h100">
|
||||
<v-card class="pb-5 h100">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">공통그룹코드</v-card-title>
|
||||
<div>
|
||||
<Buttons
|
||||
:parentPrgmId="myPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailList"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5" style="height:calc(100% - 70px);">
|
||||
<div ref="gridParent" class="h100 w100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="myPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@sendSelectedRowStatInfo="getSelectedRowStatInfo"
|
||||
:selectedRowDataWatchFlag="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col :cols="7" class="h100">
|
||||
<v-card class="pb-5">
|
||||
<v-card-title>공통그룹코드 상세</v-card-title>
|
||||
<div class="px-5" style="height:calc(100% - 70px)">
|
||||
<v-tabs v-model="tab" :hide-slider="true">
|
||||
<v-tab
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:disabled="item.disabledFlag"
|
||||
>
|
||||
{{ item.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-tabs-items
|
||||
v-model="tab"
|
||||
style="height: calc(100% - 65px);"
|
||||
class="py-6"
|
||||
>
|
||||
<!-- <v-tab-item v-for="item in items" :key="item.id"> -->
|
||||
<v-tab-item v-for="(item, idx) in items" :key="item.id">
|
||||
<component
|
||||
v-if="item.id == 'grpInfoTab'"
|
||||
:is="'Form'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:detailList="detailList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
<CommCdTab
|
||||
v-if="item.id == 'commCdTab'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:innerTabGridInfo="{ tab, idx }"
|
||||
/>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
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 CommCdTab from '@/components/pages/comm/CommCdTab';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
export default {
|
||||
mixins: [mixinGlobal, resize],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
BtnSearch,
|
||||
Buttons,
|
||||
selectCodeList,
|
||||
InputText,
|
||||
Form,
|
||||
CommCdTab,
|
||||
Grid,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
gridName: 'rowGrid',
|
||||
loadGrid: false,
|
||||
tab: null,
|
||||
items: [
|
||||
{ name: '그룹코드정보', id: 'grpInfoTab', disabledFlag: false },
|
||||
{ name: '공통코드', id: 'commCdTab', disabledFlag: false },
|
||||
],
|
||||
detailList: myDetail,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// ...mapState({
|
||||
// pageData: state => state.pageData[myPrgmId]
|
||||
// }),
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
chkSysDivCd() {
|
||||
// 시스템구분 선택 감지
|
||||
return this.pageData.sysDivCd;
|
||||
},
|
||||
chkUseFg() {
|
||||
// 사용여부 선택 감지
|
||||
return this.pageData.useFg;
|
||||
},
|
||||
mySysDivCdList() {
|
||||
return this.pageData.sysDivCdList;
|
||||
},
|
||||
myUseFgList() {
|
||||
return this.pageData.useFgList;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkSysDivCd() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
chkUseFg() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
},
|
||||
async beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
await this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.gridInit();
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 36;
|
||||
|
||||
const myOptions = {
|
||||
scrollX: false,
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
|
||||
const sysCdList = this.mySysDivCdList;
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
{
|
||||
header: '시스템구분',
|
||||
name: 'sysDivCd',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
let commCdNm = '';
|
||||
if (sysCdList.length > 0) {
|
||||
commCdNm = sysCdList.find(item => {
|
||||
if (item.commCd == value) {
|
||||
return item.commCdNm;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 데이터에 따른 더미데이터
|
||||
switch (value) {
|
||||
case 'COMM':
|
||||
commCdNm = '공통관리';
|
||||
break;
|
||||
case 'CMMS':
|
||||
commCdNm = '설비관리';
|
||||
break;
|
||||
case 'EMS':
|
||||
commCdNm = '에너지관리';
|
||||
break;
|
||||
case 'GMS':
|
||||
commCdNm = '온실가스관리';
|
||||
break;
|
||||
case 'MDL':
|
||||
commCdNm = '온실가스관리';
|
||||
break;
|
||||
}
|
||||
}
|
||||
return commCdNm;
|
||||
},
|
||||
},
|
||||
{ header: '그룹코드', name: 'commGrpCd', align: 'left' },
|
||||
{ header: '그룹코드명', name: 'commGrpNm' },
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
const newValue = _this.pageData.useFgList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
return newValue[0].commCdNm;
|
||||
},
|
||||
}, //,
|
||||
{ header: '비고', name: 'rmrk', hidden: true },
|
||||
];
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
this.getRowGridData();
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
await this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getRowGridData() {
|
||||
this.loadGrid = false;
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectCommGrpCd',
|
||||
resKey: 'commGrpCdData',
|
||||
sendParam: {
|
||||
commGrpCd: this.pageData.commGrpCd,
|
||||
commGrpNm: this.pageData.commGrpCdNm,
|
||||
sysDivCd: this.pageData.sysDivCd,
|
||||
useFg: this.pageData.useFg,
|
||||
},
|
||||
});
|
||||
const newRes = res.map(item => {
|
||||
const newObj = {
|
||||
...item,
|
||||
rowStat: null,
|
||||
sysDivCd: item.sysDiv,
|
||||
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
|
||||
};
|
||||
return newObj;
|
||||
});
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: newRes,
|
||||
});
|
||||
this.loadGrid = true;
|
||||
this.$nextTick(() => {
|
||||
if (newRes.length > 0) {
|
||||
this.$refs[this.gridName].focus({
|
||||
//rowKey: 0,
|
||||
rowKey:
|
||||
this.pageData.rowGridSelectKey == '' ||
|
||||
this.pageData.rowGridSelectKey == null
|
||||
? 0
|
||||
: this.pageData.rowGridSelectKey ==
|
||||
this.$refs[this.gridName].getData().length - 1
|
||||
? this.pageData.rowGridSelectKey
|
||||
: 0,
|
||||
columnName: 'sysDivCd',
|
||||
setScroll: true,
|
||||
});
|
||||
} else {
|
||||
this.detailDataInit();
|
||||
}
|
||||
});
|
||||
},
|
||||
async getRowData(data) {
|
||||
if (data.rowStat === 'I') {
|
||||
this.detailList[0].disabled = false;
|
||||
} else {
|
||||
this.detailList[0].disabled = true;
|
||||
}
|
||||
this.setPageData({
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: data,
|
||||
});
|
||||
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectCommCd',
|
||||
resKey: 'commCdData',
|
||||
sendParam: {
|
||||
commGrpCd: data.commGrpCd,
|
||||
},
|
||||
});
|
||||
const newRes = res.map(item => {
|
||||
const newObj = {
|
||||
...item,
|
||||
commCd: item.commCd || '',
|
||||
commCdNm: item.commCdNm || '',
|
||||
commCdAbbrnm: item.commCdAbbrnm || '',
|
||||
sortSeq: item.sortSeq || '',
|
||||
useFg: item.useFg || '',
|
||||
userDefVal1: item.userDefVal1 || '',
|
||||
userDefVal2: item.userDefVal2 || '',
|
||||
userDefVal3: item.userDefVal3 || '',
|
||||
rmrk: item.rmrk || '',
|
||||
rowStat: null,
|
||||
};
|
||||
return newObj;
|
||||
});
|
||||
|
||||
this.setGridData({
|
||||
gridKey: 'rowDetailGrid',
|
||||
value: newRes,
|
||||
});
|
||||
},
|
||||
detailDataInit() {
|
||||
this.setPageData({
|
||||
rowGridSelectKey: null,
|
||||
rowGridSelectData: [],
|
||||
});
|
||||
this.setGridData({
|
||||
gridKey: 'rowDetailGrid',
|
||||
value: [],
|
||||
});
|
||||
},
|
||||
getSelectedRowStatInfo(data) {
|
||||
if (data) {
|
||||
var rowStat = data.rowStat;
|
||||
if (rowStat === 'I') {
|
||||
this.tab = 0;
|
||||
for (var i = 1; i < this.items.length; i++) {
|
||||
this.items[i].disabledFlag = true;
|
||||
}
|
||||
} else if (rowStat === 'U') {
|
||||
for (var i = 1; i < this.items.length; i++) {
|
||||
this.items[i].disabledFlag = false;
|
||||
}
|
||||
} else if (rowStat === 'D') {
|
||||
for (var i = 1; i < this.items.length; i++) {
|
||||
this.items[i].disabledFlag = false;
|
||||
}
|
||||
} else if (rowStat === null) {
|
||||
for (var i = 1; i < this.items.length; i++) {
|
||||
this.items[i].disabledFlag = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async btnActions(action) {
|
||||
let dataArr = [];
|
||||
switch (action) {
|
||||
case 'add':
|
||||
this.$refs[this.gridName].addRow();
|
||||
this.detailList[0].disabled = false;
|
||||
break;
|
||||
|
||||
case 'remove':
|
||||
this.$refs[this.gridName].removeRow();
|
||||
break;
|
||||
|
||||
case 'save':
|
||||
dataArr = this.$refs[this.gridName].save();
|
||||
var validCheck = true;
|
||||
dataArr.filter(item => {
|
||||
if (item.rowStat === 'I') {
|
||||
if (item.commGrpCd == '' || item.commGrpNm == '') {
|
||||
alert('필수 입력값을 입력해주세요.');
|
||||
validCheck = false;
|
||||
}
|
||||
} else if (item.rowStat === 'U') {
|
||||
if (item.commGrpNm == '') {
|
||||
alert('그룹코드명을 입력해주세요.');
|
||||
validCheck = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (validCheck) {
|
||||
if (dataArr.length > 0) {
|
||||
const sendParam = {
|
||||
datas: {
|
||||
dsGrpCd: dataArr.map(item => ({
|
||||
...item,
|
||||
sysDiv: item.sysDivCd,
|
||||
useFg: item.useFg ? '1' : '0',
|
||||
})),
|
||||
},
|
||||
params: {},
|
||||
};
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'saveCommGrpCd',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs[this.gridName].gridInstance.invoke('refreshLayout');
|
||||
|
||||
this.setPageData({ isFind: true });
|
||||
});
|
||||
} else {
|
||||
alert('저장할 내용이 없습니다.');
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
gridEditingFinish(data) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
/* 검색옵션 */
|
||||
// sysDivCd: "COMM",
|
||||
sysDivCd: '',
|
||||
sysDivCdList: [],
|
||||
useFg: '1',
|
||||
useFgList: [],
|
||||
commGrpCd: '',
|
||||
commGrpCdNm: '',
|
||||
|
||||
// 선택된 그룹코드 상세 데이터
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
|
||||
isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
|
||||
/* data 세팅 */
|
||||
// 로컬 gridName 값과 동일한 이름으로 세팅
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
defaultRow: {
|
||||
sysDivCd: 'COMM',
|
||||
commGrpCd: '',
|
||||
commGrpNm: '',
|
||||
useFg: '1',
|
||||
rmrk: '',
|
||||
rowStat: 'I',
|
||||
},
|
||||
buttonAuth: {
|
||||
add: true,
|
||||
remove: true,
|
||||
save: true,
|
||||
excel: false,
|
||||
},
|
||||
},
|
||||
rowDetailGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
defaultRow: {
|
||||
commCd: null,
|
||||
commCdNm: null,
|
||||
commCdAbbrnm: null,
|
||||
sortSeq: null,
|
||||
useFg: '1',
|
||||
userDefVal1: null,
|
||||
userDefVal2: null,
|
||||
userDefVal3: null,
|
||||
rmrk: null,
|
||||
rowStat: null,
|
||||
},
|
||||
buttonAuth: {
|
||||
add: true,
|
||||
remove: true,
|
||||
save: true,
|
||||
excel: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const myDetail = [
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '그룹코드',
|
||||
valueNm: 'commGrpCd',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '그룹코드명',
|
||||
valueNm: 'commGrpNm',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '시스템구분',
|
||||
valueNm: 'sysDivCd',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
list: 'sysDivCdList',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '사용여부',
|
||||
valueNm: 'useFg',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '비고',
|
||||
valueNm: 'rmrk',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
</style>
|
||||
443
pages/comm/base/EquipmentGroupMngPage.vue
Normal file
443
pages/comm/base/EquipmentGroupMngPage.vue
Normal file
@ -0,0 +1,443 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="설비그룹명칭"
|
||||
valueNm="eqpmGrpNm"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<component :is="'SelectUseFg'" :parentPrgmId="myPrgmId" />
|
||||
</v-col>
|
||||
<v-col :cols="4" class="text-right">
|
||||
<BtnSearch @click="search" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-col :cols="5" class="h100">
|
||||
<v-card class="py-5 h100">
|
||||
<v-card-title>
|
||||
<span class="tit ft-size_20 ft-weight_600">설비그룹</span>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<div ref="gridParent" class="h100 w100">
|
||||
<component
|
||||
ref="myGrid"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="myPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col :cols="7" class="h100">
|
||||
<v-card class="py-5 h100">
|
||||
<v-card-title class="d-flex justify-between">
|
||||
<span class="tit ft-size_20 ft-weight_600">설비그룹 상세</span>
|
||||
<div>
|
||||
<v-btn
|
||||
class="v-btn-radius__20 v-btn-bg__white-blue mr-1"
|
||||
@click="addRow"
|
||||
>
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
<span>추가</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="v-btn-radius__20 v-btn-bg__white-blue mr-1"
|
||||
@click="removeRow"
|
||||
>
|
||||
<v-icon>mdi-delete-outline</v-icon>
|
||||
<span>삭제</span>
|
||||
</v-btn>
|
||||
<v-btn class="v-btn-radius__20 v-btn-bg__blue mr-1" @click="save">
|
||||
<v-icon>mdi-content-save</v-icon>
|
||||
<span>저장</span>
|
||||
</v-btn>
|
||||
<BtnExcelDownload
|
||||
style="vertical-align: middle;"
|
||||
class="d-inline-flex"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:gridName="gridName"
|
||||
/>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-row>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="설비그룹"
|
||||
valueNm="modifyEqpmGrp"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="설비그룹명"
|
||||
valueNm="modifyEqpmGrpNm"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<component :is="'SelectEqpmGrpKind'" :parentPrgmId="myPrgmId" />
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<component
|
||||
:is="'SelectUseFg'"
|
||||
diffModel="modifyUseFg"
|
||||
:parentPrgmId="myPrgmId"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="등록일시"
|
||||
valueNm="regDttm"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="수정일시"
|
||||
valueNm="procDttm"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import SelectUseFg from '@/components/common/select/SelectUseFg';
|
||||
import SelectEqpmGrpKind from '@/components/common/select/SelectEqpmGrpKind';
|
||||
import InputText from '@/components/common/input/InputText';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
|
||||
import Grid from '~/components/common/Grid';
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
export default {
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
SelectUseFg,
|
||||
SelectEqpmGrpKind,
|
||||
InputText,
|
||||
BtnSearch,
|
||||
BtnExcelDownload,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
gridName: 'rowGrid',
|
||||
loadGrid: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData: state => state.pageData[myPrgmId],
|
||||
}),
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
selectedCommCdData() {
|
||||
return this.pageData.selectedCommCdData;
|
||||
},
|
||||
chkUseFg() {
|
||||
// 사용여부 선택 감지
|
||||
return this.pageData.useFg;
|
||||
},
|
||||
modifyEqpmGrpNm() {
|
||||
return this.pageData.modifyEqpmGrpNm;
|
||||
},
|
||||
modifyEqpmGrpKind() {
|
||||
return this.pageData.modifyEqpmGrpKind;
|
||||
},
|
||||
modifyUseFg() {
|
||||
return this.pageData.modifyUseFg;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkUseFg() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
modifyEqpmGrpNm(val) {
|
||||
const isSameData = this.compareData('eqpmGrpNm', val);
|
||||
if (!isSameData) {
|
||||
const dt = {
|
||||
name: 'eqpmGrpNm',
|
||||
value: val,
|
||||
};
|
||||
this.$refs.myGrid.externalDataEdit(dt);
|
||||
}
|
||||
},
|
||||
modifyEqpmGrpKind(val) {
|
||||
const isSameData = this.compareData('eqpmGrpKind', val);
|
||||
if (!isSameData) {
|
||||
const dt = {
|
||||
name: 'eqpmGrpKind',
|
||||
value: val,
|
||||
};
|
||||
this.$refs.myGrid.externalDataEdit(dt);
|
||||
}
|
||||
},
|
||||
modifyUseFg(val) {
|
||||
const isSameData = this.compareData('useFg', val);
|
||||
if (!isSameData) {
|
||||
const dt = {
|
||||
name: 'useFg',
|
||||
value: val,
|
||||
};
|
||||
this.$refs.myGrid.externalDataEdit(dt);
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setGridData: 'setGridData',
|
||||
setGridColumn: 'setGridColumn',
|
||||
setGridOption: 'setGridOption',
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
init() {
|
||||
this.layoutInit();
|
||||
this.gridInit();
|
||||
},
|
||||
layoutInit() {
|
||||
const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
|
||||
this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
|
||||
const myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
bodyHeight: gridHeight,
|
||||
minBodyHeight: gridHeight,
|
||||
header: {
|
||||
height: 28,
|
||||
},
|
||||
rowHeight: 29,
|
||||
minRowHeight: 29,
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
value: myOptions,
|
||||
});
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
{ header: '설비그룹코드', name: 'eqpmGrp', align: 'center' },
|
||||
{ header: '설비그룹명칭', name: 'eqpmGrpNm', align: 'center' },
|
||||
{
|
||||
header: '생산설비종류',
|
||||
name: 'eqpmGrpKind',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
const newValue = _this.pageData.eqpmGrpKindList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
return newValue[0].commCdNm;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
const newValue = _this.pageData.useFgList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
return newValue[0].commCdNm;
|
||||
},
|
||||
},
|
||||
{ header: '등록일시', name: 'regDttm', hidden: true },
|
||||
{ header: '수정일시', name: 'procDttm', hidden: true },
|
||||
];
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
this.getRowGridData();
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
await this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getRowGridData() {
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmGrpMng',
|
||||
resKey: 'eqpmGrpData',
|
||||
sendParam: {
|
||||
comId: this.userInfo.comId,
|
||||
eqpmGrpNm: this.pageData.eqpmGrpNm,
|
||||
useFg: this.pageData.useFg,
|
||||
},
|
||||
});
|
||||
const newRes = res.map(item => {
|
||||
const newObj = {
|
||||
...item,
|
||||
rowStat: null,
|
||||
};
|
||||
return newObj;
|
||||
});
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (newRes.length > 0) {
|
||||
this.$refs['myGrid'].focus({
|
||||
rowKey: 0,
|
||||
columnName: 'eqpmGrp',
|
||||
setScroll: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async getRowData(data) {
|
||||
this.setPageData({
|
||||
selectedRowKey: data.rowKey,
|
||||
modifyEqpmGrp: data.eqpmGrp,
|
||||
modifyEqpmGrpNm: data.eqpmGrpNm,
|
||||
modifyEqpmGrpKind: data.eqpmGrpKind,
|
||||
modifyUseFg: data.useFg,
|
||||
regDttm: data.regDttm,
|
||||
procDttm: data.procDttm,
|
||||
selectedCommCdData: data,
|
||||
});
|
||||
},
|
||||
compareData(type, newDt) {
|
||||
if (this.selectedCommCdData[type] == newDt) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
addRow() {
|
||||
this.$refs.myGrid.addRow();
|
||||
},
|
||||
removeRow() {
|
||||
this.$refs.myGrid.removeRow();
|
||||
},
|
||||
async save() {
|
||||
const dataArr = this.$refs.myGrid.save();
|
||||
const sendParam = {
|
||||
datas: { dsGrpCd: dataArr },
|
||||
params: {},
|
||||
};
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'saveEqpmGrpMng',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
|
||||
await this.search();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
/* 검색옵션 */
|
||||
isFind: false,
|
||||
|
||||
eqpmGrpNm: '',
|
||||
useFg: '1',
|
||||
useFgList: [],
|
||||
eqpmGrpKind: 'PROD',
|
||||
eqpmGrpKindList: [],
|
||||
|
||||
modifyEqpmGrp: '',
|
||||
modifyEqpmGrpNm: '',
|
||||
modifyEqpmGrpKind: 'PROD',
|
||||
modifyUseFg: '1',
|
||||
regDttm: '',
|
||||
procDttm: '',
|
||||
|
||||
/* data 세팅 */
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
defaultRow: {
|
||||
eqpmGrp: '',
|
||||
eqpmGrpNm: '',
|
||||
eqpmGrpKind: 'PROD',
|
||||
useFg: '1',
|
||||
regDttm: '',
|
||||
procDttm: '',
|
||||
rowStat: null,
|
||||
},
|
||||
},
|
||||
|
||||
selectedCommCdData: null,
|
||||
selectedRowKey: null,
|
||||
|
||||
xlsFileInfo: {
|
||||
// 출력하려는 grid 와 같은 이름으로 세팅
|
||||
rowGrid: {
|
||||
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
|
||||
sheetName: null, // 갑이 없으면 'Sheet1'
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
</style>
|
||||
572
pages/comm/base/IndvDashboardPage.vue
Normal file
572
pages/comm/base/IndvDashboardPage.vue
Normal file
@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<swiper class="swiper" :options="swiperOption">
|
||||
<swiper-slide>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 1"
|
||||
:is="card0Loader"
|
||||
:widgetPrgmId="prgmId0"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId0"
|
||||
:widgetReflashMm="widgetReflashMm0"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 2"
|
||||
:is="card1Loader"
|
||||
:widgetPrgmId="prgmId1"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId1"
|
||||
:widgetReflashMm="widgetReflashMm1"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col xs="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 3"
|
||||
:is="card2Loader"
|
||||
:widgetPrgmId="prgmId2"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId2"
|
||||
:widgetReflashMm="widgetReflashMm2"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 4"
|
||||
:is="card3Loader"
|
||||
:widgetPrgmId="prgmId3"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId3"
|
||||
:widgetReflashMm="widgetReflashMm3"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 5"
|
||||
:is="card4Loader"
|
||||
:widgetPrgmId="prgmId4"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId4"
|
||||
:widgetReflashMm="widgetReflashMm4"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 6"
|
||||
:is="card5Loader"
|
||||
:widgetPrgmId="prgmId5"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId5"
|
||||
:widgetReflashMm="widgetReflashMm5"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-if="widgetCnt > 6">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 7"
|
||||
:is="card6Loader"
|
||||
:widgetPrgmId="prgmId6"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId6"
|
||||
:widgetReflashMm="widgetReflashMm6"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 8"
|
||||
:is="card7Loader"
|
||||
:widgetPrgmId="prgmId7"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId7"
|
||||
:widgetReflashMm="widgetReflashMm7"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 9"
|
||||
:is="card8Loader"
|
||||
:widgetPrgmId="prgmId8"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId8"
|
||||
:widgetReflashMm="widgetReflashMm8"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 10"
|
||||
:is="card9Loader"
|
||||
:widgetPrgmId="prgmId9"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId9"
|
||||
:widgetReflashMm="widgetReflashMm9"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 11"
|
||||
:is="card10Loader"
|
||||
:widgetPrgmId="prgmId10"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId10"
|
||||
:widgetReflashMm="widgetReflashMm10"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 12"
|
||||
:is="card11Loader"
|
||||
:widgetPrgmId="prgmId11"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId11"
|
||||
:widgetReflashMm="widgetReflashMm11"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-if="widgetCnt > 12">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 13"
|
||||
:is="card12Loader"
|
||||
:widgetPrgmId="prgmId12"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId12"
|
||||
:widgetReflashMm="widgetReflashMm12"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 14"
|
||||
:is="card13Loader"
|
||||
:widgetPrgmId="prgmId13"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId13"
|
||||
:widgetReflashMm="widgetReflashMm13"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 15"
|
||||
:is="card14Loader"
|
||||
:widgetPrgmId="prgmId14"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId14"
|
||||
:widgetReflashMm="widgetReflashMm14"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 16"
|
||||
:is="card15Loader"
|
||||
:widgetPrgmId="prgmId15"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId15"
|
||||
:widgetReflashMm="widgetReflashMm15"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 17"
|
||||
:is="card16Loader"
|
||||
:widgetPrgmId="prgmId16"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId16"
|
||||
:widgetReflashMm="widgetReflashMm16"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="6">
|
||||
<component
|
||||
v-if="widgetCnt >= 18"
|
||||
:is="card17Loader"
|
||||
:widgetPrgmId="prgmId17"
|
||||
:widgetPopFg="true"
|
||||
:widgetId="widgetId17"
|
||||
:widgetReflashMm="widgetReflashMm17"
|
||||
:parentPrgmId="myPrgmId"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination swiper-pagination-horizontal swiper-position" slot="pagination"></div>
|
||||
</swiper>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import Utility from "~/plugins/utility";
|
||||
import Grid from "~/components/common/Grid";
|
||||
import Chart from "~/components/common/Chart";
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
|
||||
|
||||
let myTitle;
|
||||
// const myPrgmId = "PRG4107";
|
||||
let myPrgmId;
|
||||
export default {
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
|
||||
// myTitle = myState.activeMenuInfo.menuNm;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true
|
||||
},
|
||||
components: {
|
||||
Utility,
|
||||
Grid,
|
||||
Chart,
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
widgetCnt: 0,
|
||||
card0: null,
|
||||
card1: null,
|
||||
card2: null,
|
||||
card3: null,
|
||||
card4: null,
|
||||
card5: null,
|
||||
card6: null,
|
||||
card7: null,
|
||||
card8: null,
|
||||
card9: null,
|
||||
card10: null,
|
||||
card11: null,
|
||||
card12: null,
|
||||
card13: null,
|
||||
card14: null,
|
||||
card14: null,
|
||||
card16: null,
|
||||
card17: null,
|
||||
prgmId0:null,
|
||||
prgmId1:null,
|
||||
prgmId2:null,
|
||||
prgmId3:null,
|
||||
prgmId4:null,
|
||||
prgmId5:null,
|
||||
prgmId6:null,
|
||||
prgmId7:null,
|
||||
prgmId8:null,
|
||||
prgmId9:null,
|
||||
prgmId10:null,
|
||||
prgmId11:null,
|
||||
prgmId12:null,
|
||||
prgmId13:null,
|
||||
prgmId14:null,
|
||||
prgmId15:null,
|
||||
prgmId16:null,
|
||||
prgmId17:null,
|
||||
widgetId0:null,
|
||||
widgetId1:null,
|
||||
widgetId2:null,
|
||||
widgetId3:null,
|
||||
widgetId4:null,
|
||||
widgetId5:null,
|
||||
widgetId6:null,
|
||||
widgetId7:null,
|
||||
widgetId8:null,
|
||||
widgetId9:null,
|
||||
widgetId10:null,
|
||||
widgetId11:null,
|
||||
widgetId12:null,
|
||||
widgetId13:null,
|
||||
widgetId14:null,
|
||||
widgetId15:null,
|
||||
widgetId16:null,
|
||||
widgetId17:null,
|
||||
|
||||
widgetReflashMm0:15*60000,
|
||||
widgetReflashMm1:15*60000,
|
||||
widgetReflashMm2:15*60000,
|
||||
widgetReflashMm3:15*60000,
|
||||
widgetReflashMm4:15*60000,
|
||||
widgetReflashMm5:15*60000,
|
||||
|
||||
widgetReflashMm6:15*60000,
|
||||
widgetReflashMm7:15*60000,
|
||||
widgetReflashMm8:15*60000,
|
||||
widgetReflashMm9:15*60000,
|
||||
widgetReflashMm10:15*60000,
|
||||
widgetReflashMm11:15*60000,
|
||||
|
||||
widgetReflashMm12:15*60000,
|
||||
widgetReflashMm13:15*60000,
|
||||
widgetReflashMm14:15*60000,
|
||||
widgetReflashMm15:15*60000,
|
||||
widgetReflashMm16:15*60000,
|
||||
widgetReflashMm17:15*60000,
|
||||
swiperOption: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20,
|
||||
loop: false,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
keyboard: {
|
||||
enabled: true
|
||||
},
|
||||
allowTouchMove : false, //(false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능
|
||||
watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
|
||||
},
|
||||
widgetPrgmUrlList: [],
|
||||
widgetList: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData: state => state.pageData[myPrgmId]
|
||||
}),
|
||||
card0Loader(){
|
||||
const tab0 = this.card0 == null ? 'BlankWidget' : this.card0
|
||||
//const tab0 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab0}`)
|
||||
},
|
||||
card1Loader(){
|
||||
const tab1 = this.card1 == null ? 'BlankWidget' : this.card1
|
||||
//const tab1 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab1}`)
|
||||
},
|
||||
card2Loader(){
|
||||
const tab2 = this.card2 == null ? 'BlankWidget' : this.card2
|
||||
//const tab2 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab2}`)
|
||||
},
|
||||
card3Loader(){
|
||||
const tab3 = this.card3 == null ? 'BlankWidget' : this.card3
|
||||
//const tab3 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab3}`)
|
||||
},
|
||||
card4Loader(){
|
||||
const tab4 = this.card4 == null ? 'BlankWidget' : this.card4
|
||||
//const tab4 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab4}`)
|
||||
},
|
||||
card5Loader(){
|
||||
const tab5 = this.card5 == null ? 'BlankWidget' : this.card5
|
||||
//const tab5 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab5}`)
|
||||
},
|
||||
|
||||
card6Loader(){
|
||||
const tab6 = this.card6 == null ? 'BlankWidget' : this.card6
|
||||
//const tab0 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab6}`)
|
||||
},
|
||||
card7Loader(){
|
||||
const tab7 = this.card7 == null ? 'BlankWidget' : this.card7
|
||||
//const tab1 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab7}`)
|
||||
},
|
||||
card8Loader(){
|
||||
const tab8 = this.card8 == null ? 'BlankWidget' : this.card8
|
||||
//const tab2 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab8}`)
|
||||
},
|
||||
card9Loader(){
|
||||
const tab9 = this.card9 == null ? 'BlankWidget' : this.card9
|
||||
//const tab3 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab9}`)
|
||||
},
|
||||
card10Loader(){
|
||||
const tab10 = this.card10 == null ? 'BlankWidget' : this.card10
|
||||
//const tab4 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab10}`)
|
||||
},
|
||||
card11Loader(){
|
||||
const tab11 = this.card11 == null ? 'BlankWidget' : this.card11
|
||||
//const tab5 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab11}`)
|
||||
},
|
||||
|
||||
card12Loader(){
|
||||
const tab12 = this.card12 == null ? 'BlankWidget' : this.card12
|
||||
//const tab0 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab12}`)
|
||||
},
|
||||
card13Loader(){
|
||||
const tab13 = this.card13 == null ? 'BlankWidget' : this.card13
|
||||
//const tab1 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab13}`)
|
||||
},
|
||||
card14Loader(){
|
||||
const tab14 = this.card14 == null ? 'BlankWidget' : this.card14
|
||||
//const tab2 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab14}`)
|
||||
},
|
||||
card15Loader(){
|
||||
const tab15 = this.card15 == null ? 'BlankWidget' : this.card15
|
||||
//const tab3 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab15}`)
|
||||
},
|
||||
card16Loader(){
|
||||
const tab16 = this.card16 == null ? 'BlankWidget' : this.card16
|
||||
//const tab4 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab16}`)
|
||||
},
|
||||
card17Loader(){
|
||||
const tab17 = this.card17 == null ? 'BlankWidget' : this.card17
|
||||
//const tab5 = 'BlankWidget'
|
||||
return () => import(`@/components/widget/${tab17}`)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
async beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
await this.$store.dispatch("chkOpenTabList", {
|
||||
key: "create",
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData
|
||||
});
|
||||
},
|
||||
async created(){
|
||||
|
||||
},
|
||||
async mounted(){
|
||||
await this.selectIndvWidgetList();
|
||||
await this.selectWidgetPrgmUrlList();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: "setPageData",
|
||||
setGridData: "setGridData",
|
||||
setGridColumn: "setGridColumn",
|
||||
setGridOption: "setGridOption",
|
||||
setChartOption: "setChartOption"
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: "modules/list/postApi",
|
||||
postUpdateApi: "modules/list/postUpdateApi",
|
||||
postApiReturn: "modules/list/postApiReturn",
|
||||
chkOpenTabList: "chkOpenTabList"
|
||||
}),
|
||||
|
||||
async selectIndvWidgetList(){
|
||||
const _this = this;
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: "selectIndvWidgetList",
|
||||
resKey: "widgetData",
|
||||
sendParam: {}
|
||||
});
|
||||
|
||||
const res2 = await this.postApiReturn({
|
||||
apiKey: "selectWidgetPrgmUrl",
|
||||
resKey: "widgetData",
|
||||
sendParam: {}
|
||||
});
|
||||
this.widgetPrgmUrlList = res2;
|
||||
this.widgetList = res;
|
||||
this.widgetCnt = res.length;
|
||||
for(var i=0; i<this.widgetList.length; i++){
|
||||
for(var j=0; j<this.widgetPrgmUrlList.length; j++){
|
||||
if(this.widgetList[i].widgetId == this.widgetPrgmUrlList[j].widgetId){
|
||||
eval('_this.prgmId' + i + "= true");
|
||||
}
|
||||
}
|
||||
eval('_this.card' + i + "= res["+i+"].widgetId");
|
||||
eval('_this.widgetId' + i + "= res["+i+"].widgetId");
|
||||
if(res[i].widgetReflashMm == null){
|
||||
eval('_this.widgetReflashMm' + i + "= 15*60000");
|
||||
}else{
|
||||
eval('_this.widgetReflashMm' + i + "= res["+i+"].widgetReflashMm*60000");
|
||||
}
|
||||
|
||||
}
|
||||
// for(var i=0; i<res.length; i++){
|
||||
// eval('_this.card' + i + "= res["+i+"].widgetId");
|
||||
// }
|
||||
},
|
||||
async selectWidgetPrgmUrlList(){
|
||||
// const _this = this;
|
||||
// const res = await this.postApiReturn({
|
||||
// apiKey: "selectWidgetPrgmUrl",
|
||||
// resKey: "widgetData",
|
||||
// sendParam: {}
|
||||
// });
|
||||
// this.widgetPrgmUrlList = res;
|
||||
// for(var i=0; i<this.widgetList.length; i++){
|
||||
// for(var j=0; j<this.widgetPrgmUrlList.length; j++){
|
||||
// if(this.widgetList[i].widgetId == this.widgetPrgmUrlList[j].widgetId){
|
||||
// eval('_this.prgmId' + i + "= true");
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
},
|
||||
openWidgetPrgm(widgetId){
|
||||
var prgmUrl;
|
||||
for(var i=0; i<this.widgetPrgmUrlList.length; i++){
|
||||
if(this.widgetPrgmUrlList[i].widgetId == widgetId){
|
||||
prgmUrl = this.widgetPrgmUrlList[i].prgmUrl
|
||||
}
|
||||
}
|
||||
this.$router.push({
|
||||
path: prgmUrl
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
isFind: false,
|
||||
};
|
||||
|
||||
const myDetail = [
|
||||
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiper-wrapper{
|
||||
box-sizing: inherit !important;
|
||||
}
|
||||
|
||||
.swiper-pagination-horizontal{
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.swiper-pagination-bullet{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,5px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #196dcb;
|
||||
}
|
||||
// .swiper-position{
|
||||
// position: fixed;
|
||||
// }
|
||||
</style>
|
||||
1171
pages/comm/base/NoticeMngPage.vue
Normal file
1171
pages/comm/base/NoticeMngPage.vue
Normal file
File diff suppressed because it is too large
Load Diff
527
pages/comm/base/PrgmMngPage.vue
Normal file
527
pages/comm/base/PrgmMngPage.vue
Normal file
@ -0,0 +1,527 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<!-- 조회조견 -->
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<component
|
||||
:is="'selectCodeList'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'사용여부'"
|
||||
:dataKey="'selectUseFg'"
|
||||
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
|
||||
:addAll="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="프로그램명"
|
||||
valueNm="prgmNm"
|
||||
:searchOption="true"
|
||||
:labelCols="3"
|
||||
:textCols="9"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="5" class="text-right">
|
||||
<BtnSearch />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row ref="contents">
|
||||
<!-- 프로그램 리스트 -->
|
||||
<v-col :cols="5" class="h100">
|
||||
<v-card class="pb-5">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">프로그램 리스트</v-card-title>
|
||||
<div>
|
||||
<Buttons
|
||||
:parentPrgmId="myPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailList"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:calc(100% - 70px)">
|
||||
<div ref="gridParent" class="px-5 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:gridName="gridName"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- 프로그램 상세 -->
|
||||
<v-col :cols="7" class="h100">
|
||||
<v-card class="pb-5">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">프로그램 상세</v-card-title>
|
||||
</div>
|
||||
<div class="px-5 h100" style="height:calc(100% - 76px)">
|
||||
<div class="w100">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
// import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
import InputText from '@/components/common/input/InputText';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Form from '~/components/common/form/Form';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
export default {
|
||||
mixins: [mixinGlobal, resize],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
selectCodeList,
|
||||
Form,
|
||||
Grid,
|
||||
BtnSearch,
|
||||
Buttons,
|
||||
InputText,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
loadGrid: false,
|
||||
gridName: 'rowGrid',
|
||||
// rowGridOrigin: [],
|
||||
detailList: myDetail,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// ...mapState({
|
||||
// pageData: state => state.pageData[myPrgmId]
|
||||
// }),
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
chkUseFg() {
|
||||
// 사용여부 선택 감지
|
||||
return this.pageData.selectUseFg;
|
||||
},
|
||||
chkRowGridSelectKey() {
|
||||
return this.pageData.rowGridSelectKey;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkUseFg() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
// console.log("3.vue::beforeCreate");
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
// mounted() {
|
||||
// this.init();
|
||||
// },
|
||||
// beforeDestroy() {
|
||||
// this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
|
||||
// // console.log(myPrgmId, " , 3.vue::beforeDestroy");
|
||||
// },
|
||||
methods: {
|
||||
// ...mapMutations({
|
||||
// setPageData: "setPageData",
|
||||
// setGridData: "setGridData",
|
||||
// setGridColumn: "setGridColumn",
|
||||
// setGridOption: "setGridOption"
|
||||
// }),
|
||||
// ...mapActions({
|
||||
// postApi: "modules/list/postApi",
|
||||
// postUpdateApi: "modules/list/postUpdateApi",
|
||||
// postApiReturn: "modules/list/postApiReturn",
|
||||
// setTree: "modules/list/setTree",
|
||||
// chkOpenTabList: "chkOpenTabList"
|
||||
// }),
|
||||
init() {
|
||||
// this.layoutInit();
|
||||
this.gridInit();
|
||||
},
|
||||
// layoutInit() {
|
||||
// const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
|
||||
// this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
|
||||
// },
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 36;
|
||||
|
||||
const myOptions = {
|
||||
scrollX: false,
|
||||
};
|
||||
// console.log("this.pageData", this.pageData)
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
{ header: '프로그램ID', name: 'prgmId', align: 'center' },
|
||||
{ header: '프로그램명', name: 'prgmNm' },
|
||||
{
|
||||
header: '타입',
|
||||
name: 'prgmTpCd',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
return value ? (value === '1' ? '프로그램' : '팝업') : null;
|
||||
},
|
||||
}, // "1": 프로그램, "2": 팝업
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
value = value === true ? '1' : '0';
|
||||
const newValue = _this.pageData.selectUseFgList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
return newValue[0].commCdNm;
|
||||
},
|
||||
}, // "1": 사용, "0": 사용안함,
|
||||
{ header: '프로그램URL', name: 'url', hidden: true },
|
||||
{ header: '등록자NO', name: 'regUserNo', hidden: true },
|
||||
{ header: '등록일시', name: 'regDttm', hidden: true },
|
||||
{ header: '수정자NO', name: 'procUserNo', hidden: true },
|
||||
{ header: '수정일시', name: 'procDttm', hidden: true },
|
||||
];
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
// value: myOptions
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
// this.getRowGridData();
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
await this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getRowGridData() {
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectPrgm',
|
||||
resKey: 'prgmData',
|
||||
sendParam: {
|
||||
useFg: this.chkUseFg,
|
||||
prgmNm: this.pageData.prgmNm, // 검색키워드: 프로그램명
|
||||
},
|
||||
});
|
||||
const newRes = res.map(item => {
|
||||
const newObj = {
|
||||
...item,
|
||||
rowStat: null,
|
||||
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
|
||||
};
|
||||
return newObj;
|
||||
});
|
||||
|
||||
// 엑셀 다운로드용 데이터 재정렬
|
||||
this.xlsDataBind(res);
|
||||
// this.rowGridOrigin = Utility.copyObj(newRes);
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (newRes.length > 0) {
|
||||
this.$refs[this.gridName].focus({
|
||||
//rowKey: 0,
|
||||
//rowKey: this.chkRowGridSelectKey || 0,
|
||||
rowKey:
|
||||
this.pageData.rowGridSelectKey == '' ||
|
||||
this.pageData.rowGridSelectKey == null
|
||||
? 0
|
||||
: this.pageData.rowGridSelectKey ==
|
||||
this.$refs[this.gridName].getData().length - 1
|
||||
? this.pageData.rowGridSelectKey
|
||||
: 0,
|
||||
setScroll: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async getRowData(data, gridName) {
|
||||
this.setGridSelectData({
|
||||
gridKey: gridName,
|
||||
gridSelect: true,
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: data,
|
||||
});
|
||||
|
||||
this.setPageData({
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: data,
|
||||
});
|
||||
},
|
||||
compareData(type, newDt) {
|
||||
if (this.selectedCommCdData[type] == newDt) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
gridEditingFinish(data) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
async btnActions(action) {
|
||||
switch (action) {
|
||||
case 'add':
|
||||
this.$refs[this.gridName].addRow();
|
||||
break;
|
||||
|
||||
case 'remove':
|
||||
this.$refs[this.gridName].removeRow();
|
||||
break;
|
||||
|
||||
case 'save':
|
||||
var dataArr = this.$refs[this.gridName].save();
|
||||
if (dataArr.length > 0) {
|
||||
const sendParam = {
|
||||
datas: {
|
||||
dsPrgm: dataArr.map(item => ({
|
||||
...item,
|
||||
useFg: item.useFg ? '1' : '0',
|
||||
})),
|
||||
},
|
||||
params: {},
|
||||
};
|
||||
for (var i = 0; i < sendParam.datas.dsPrgm.length; i++) {
|
||||
var prgmChk = sendParam.datas.dsPrgm[i].prgmNm;
|
||||
}
|
||||
if (prgmChk == null || prgmChk == undefined || prgmChk == '') {
|
||||
alert('프로그램명을 입력하세요.');
|
||||
} else {
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'savePrgm',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
} else {
|
||||
alert('저장할 내용이 없습니다.');
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
xlsDataBind(res) {
|
||||
const xlsRowData = res.map(item => {
|
||||
const obj = {
|
||||
...item,
|
||||
useFg: item.useFg == '1' ? '사용' : '사용안함',
|
||||
prgmTpCd: item.prgmTpCd == '1' ? '프로그램' : '팝업',
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
this.setPageData({
|
||||
xlsFileInfo: {
|
||||
[this.gridName]: {
|
||||
rowData: xlsRowData,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
selectUseFg: false,
|
||||
selectUseFgList: [],
|
||||
|
||||
prgmNm: '',
|
||||
|
||||
/* 검색옵션 */
|
||||
isFind: false,
|
||||
|
||||
/* data 세팅 */
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
defaultRow: {
|
||||
prgmId: null,
|
||||
prgmNm: null,
|
||||
prgmTpCd: '1',
|
||||
useFg: true,
|
||||
url: null,
|
||||
regUserNo: null,
|
||||
regDttm: null,
|
||||
procUserNo: null,
|
||||
procDttm: null,
|
||||
rowStat: null,
|
||||
},
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
rowGridModify: false,
|
||||
buttonAuth: {
|
||||
add: true,
|
||||
remove: true,
|
||||
save: true,
|
||||
excel: true,
|
||||
},
|
||||
},
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
rowGridModify: false,
|
||||
|
||||
xlsFileInfo: {
|
||||
// 출력하려는 grid 와 같은 이름으로 세팅
|
||||
rowGrid: {
|
||||
rowData: [],
|
||||
// 엑셀변환시 데이타 가공이 추가로 필요하게 된다면 여기에 가공된 rowData 를 넣어야 할듯
|
||||
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
|
||||
sheetName: null, // 갑이 없으면 'Sheet1'
|
||||
},
|
||||
},
|
||||
};
|
||||
// console.log("this.pageData",this.pageData)
|
||||
|
||||
const myDetail = [
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '프로그램ID',
|
||||
valueNm: 'prgmId',
|
||||
readonly: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: false,
|
||||
placeholder: '시스템 자동입력',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '프로그램명',
|
||||
valueNm: 'prgmNm',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '프로그램구분',
|
||||
valueNm: 'prgmTpCd',
|
||||
essential: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
list: [
|
||||
{ text: '프로그램', value: '1' },
|
||||
{ text: '팝업', value: '2' },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '사용여부',
|
||||
valueNm: 'useFg',
|
||||
essential: true,
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '프로그램URL',
|
||||
valueNm: 'url',
|
||||
disabled: false,
|
||||
cols: 12,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '등록자NO',
|
||||
valueNm: 'regUserNo',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
placeholder: '시스템 자동입력',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '등록일시',
|
||||
valueNm: 'regDttm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
placeholder: '시스템 자동입력',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '수정자NO',
|
||||
valueNm: 'procUserNo',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
placeholder: '시스템 자동입력',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '수정일시',
|
||||
valueNm: 'procDttm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
placeholder: '시스템 자동입력',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
</style>
|
||||
547
pages/comm/base/PrgmMngPage_Pagination.vue
Normal file
547
pages/comm/base/PrgmMngPage_Pagination.vue
Normal file
@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<!-- 조회조견 -->
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<component
|
||||
:is="'selectCodeList'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'사용여부'"
|
||||
:dataKey="'selectUseFg'"
|
||||
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
|
||||
:addAll="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="프로그램명"
|
||||
valueNm="prgmNm"
|
||||
:searchOption="true"
|
||||
:labelCols="3"
|
||||
:textCols="9"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="5" class="text-right">
|
||||
<BtnSearch />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row ref="contents">
|
||||
<!-- 프로그램 리스트 -->
|
||||
<v-col :cols="5" class="h100">
|
||||
<v-card class="pb-5">
|
||||
<v-card-title>프로그램 리스트</v-card-title>
|
||||
<div style="height:calc(100% - 70px)">
|
||||
<div ref="gridParent" class="px-5 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:gridName="gridName"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
<pagination
|
||||
id="pagination"
|
||||
:total-count="totalCount"
|
||||
:page-num="page"
|
||||
:limit="limit"
|
||||
@loadData="changeGrid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- 프로그램 상세 -->
|
||||
<v-col :cols="7" class="h100">
|
||||
<v-card class="pb-5">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">프로그램 상세</v-card-title>
|
||||
<div>
|
||||
<Buttons
|
||||
:parentPrgmId="myPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailList"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 h100" style="height:calc(100% - 76px)">
|
||||
<div class="w100">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
// import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
import InputText from '@/components/common/input/InputText';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Form from '~/components/common/form/Form';
|
||||
import Utility from '~/plugins/utility';
|
||||
import pagination from '~/components/Pagination';
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
export default {
|
||||
mixins: [mixinGlobal],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
selectCodeList,
|
||||
Form,
|
||||
Grid,
|
||||
BtnSearch,
|
||||
Buttons,
|
||||
InputText,
|
||||
pagination,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
loadGrid: false,
|
||||
gridName: 'rowGrid',
|
||||
// rowGridOrigin: [],
|
||||
detailList: myDetail,
|
||||
itemsPerPage: 10,
|
||||
itemsPerPageArray: [10, 20, 30],
|
||||
limit: 20,
|
||||
page: 1,
|
||||
totalCount: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// ...mapState({
|
||||
// pageData: state => state.pageData[myPrgmId]
|
||||
// }),
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
chkUseFg() {
|
||||
// 사용여부 선택 감지
|
||||
return this.pageData.selectUseFg;
|
||||
},
|
||||
chkRowGridSelectKey() {
|
||||
return this.pageData.rowGridSelectKey;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkUseFg() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
// console.log("3.vue::beforeCreate");
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
// mounted() {
|
||||
// this.init();
|
||||
// },
|
||||
// beforeDestroy() {
|
||||
// this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
|
||||
// // console.log(myPrgmId, " , 3.vue::beforeDestroy");
|
||||
// },
|
||||
methods: {
|
||||
// ...mapMutations({
|
||||
// setPageData: "setPageData",
|
||||
// setGridData: "setGridData",
|
||||
// setGridColumn: "setGridColumn",
|
||||
// setGridOption: "setGridOption"
|
||||
// }),
|
||||
// ...mapActions({
|
||||
// postApi: "modules/list/postApi",
|
||||
// postUpdateApi: "modules/list/postUpdateApi",
|
||||
// postApiReturn: "modules/list/postApiReturn",
|
||||
// setTree: "modules/list/setTree",
|
||||
// chkOpenTabList: "chkOpenTabList"
|
||||
// }),
|
||||
init() {
|
||||
// this.layoutInit();
|
||||
this.gridInit();
|
||||
},
|
||||
// layoutInit() {
|
||||
// const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
|
||||
// this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
|
||||
// },
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 60;
|
||||
|
||||
const myOptions = {
|
||||
scrollX: false,
|
||||
};
|
||||
// console.log("this.pageData", this.pageData)
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
{ header: '프로그램ID', name: 'prgmId', align: 'center' },
|
||||
{ header: '프로그램명', name: 'prgmNm' },
|
||||
{
|
||||
header: '타입',
|
||||
name: 'prgmTpCd',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
return value ? (value === '1' ? '프로그램' : '팝업') : null;
|
||||
},
|
||||
}, // "1": 프로그램, "2": 팝업
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
value = value === true ? '1' : '0';
|
||||
const newValue = _this.pageData.selectUseFgList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
return newValue[0].commCdNm;
|
||||
},
|
||||
}, // "1": 사용, "0": 사용안함,
|
||||
{ header: '프로그램URL', name: 'url', hidden: true },
|
||||
{ header: '등록자NO', name: 'regUserNo', hidden: true },
|
||||
{ header: '등록일시', name: 'regDttm', hidden: true },
|
||||
{ header: '수정자NO', name: 'procUserNo', hidden: true },
|
||||
{ header: '수정일시', name: 'procDttm', hidden: true },
|
||||
];
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
// value: myOptions
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
// this.getRowGridData();
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
await this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getRowGridData() {
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectPrgmPage',
|
||||
resKey: 'prgmData',
|
||||
sendParam: {
|
||||
useFg: this.chkUseFg,
|
||||
prgmNm: this.pageData.prgmNm, // 검색키워드: 프로그램명
|
||||
limit: this.limit,
|
||||
page: this.page,
|
||||
offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
|
||||
},
|
||||
});
|
||||
const newRes = res.map(item => {
|
||||
const newObj = {
|
||||
...item,
|
||||
rowStat: null,
|
||||
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
|
||||
};
|
||||
return newObj;
|
||||
});
|
||||
const res2 = await this.postApiReturn({
|
||||
apiKey: 'selectPrgmTotal',
|
||||
resKey: 'prgmDataTotal',
|
||||
sendParam: {
|
||||
useFg: this.chkUseFg,
|
||||
prgmNm: this.pageData.prgmNm, // 검색키워드: 프로그램명
|
||||
},
|
||||
});
|
||||
|
||||
this.totalCount = res2[0].totalCount;
|
||||
|
||||
// 엑셀 다운로드용 데이터 재정렬
|
||||
this.xlsDataBind(res);
|
||||
// this.rowGridOrigin = Utility.copyObj(newRes);
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (newRes.length > 0) {
|
||||
this.$refs[this.gridName].focus({
|
||||
// rowKey: this.chkRowGridSelectKey || 0,
|
||||
//rowKey: 0,
|
||||
rowKey:
|
||||
this.pageData.rowGridSelectKey == '' ||
|
||||
this.pageData.rowGridSelectKey == null
|
||||
? 0
|
||||
: this.pageData.rowGridSelectKey ==
|
||||
this.$refs[this.gridName].getData().length - 1
|
||||
? this.pageData.rowGridSelectKey
|
||||
: 0,
|
||||
setScroll: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async getRowData(data, gridName) {
|
||||
this.setGridSelectData({
|
||||
gridKey: gridName,
|
||||
gridSelect: true,
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: data,
|
||||
});
|
||||
},
|
||||
compareData(type, newDt) {
|
||||
if (this.selectedCommCdData[type] == newDt) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
gridEditingFinish(data) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
async btnActions(action) {
|
||||
switch (action) {
|
||||
case 'add':
|
||||
this.$refs[this.gridName].addRow();
|
||||
break;
|
||||
|
||||
case 'remove':
|
||||
this.$refs[this.gridName].removeRow();
|
||||
break;
|
||||
|
||||
case 'save':
|
||||
var dataArr = this.$refs[this.gridName].save();
|
||||
if (dataArr.length > 0) {
|
||||
const sendParam = {
|
||||
datas: {
|
||||
dsPrgm: dataArr.map(item => ({
|
||||
...item,
|
||||
useFg: item.useFg ? '1' : '0',
|
||||
})),
|
||||
},
|
||||
params: {},
|
||||
};
|
||||
for (var i = 0; i < sendParam.datas.dsPrgm.length; i++) {
|
||||
var prgmChk = sendParam.datas.dsPrgm[i].prgmNm;
|
||||
}
|
||||
if (prgmChk == null || prgmChk == undefined || prgmChk == '') {
|
||||
alert('프로그램명을 입력하세요.');
|
||||
} else {
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'savePrgm',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
} else {
|
||||
alert('저장할 내용이 없습니다.');
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
xlsDataBind(res) {
|
||||
const xlsRowData = res.map(item => {
|
||||
const obj = {
|
||||
...item,
|
||||
useFg: item.useFg == '1' ? '사용' : '사용안함',
|
||||
prgmTpCd: item.prgmTpCd == '1' ? '프로그램' : '팝업',
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
this.setPageData({
|
||||
xlsFileInfo: {
|
||||
[this.gridName]: {
|
||||
rowData: xlsRowData,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
changeGrid: async function(pageNum, limit) {
|
||||
this.page = pageNum;
|
||||
this.limit = limit;
|
||||
|
||||
this.search();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
selectUseFg: false,
|
||||
selectUseFgList: [],
|
||||
|
||||
prgmNm: '',
|
||||
|
||||
/* 검색옵션 */
|
||||
isFind: false,
|
||||
|
||||
/* data 세팅 */
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
defaultRow: {
|
||||
prgmId: null,
|
||||
prgmNm: null,
|
||||
prgmTpCd: '1',
|
||||
useFg: true,
|
||||
url: null,
|
||||
regUserNo: null,
|
||||
regDttm: null,
|
||||
procUserNo: null,
|
||||
procDttm: null,
|
||||
rowStat: null,
|
||||
},
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
rowGridModify: false,
|
||||
buttonAuth: {
|
||||
add: true,
|
||||
remove: true,
|
||||
save: true,
|
||||
excel: true,
|
||||
},
|
||||
},
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
rowGridModify: false,
|
||||
|
||||
xlsFileInfo: {
|
||||
// 출력하려는 grid 와 같은 이름으로 세팅
|
||||
rowGrid: {
|
||||
rowData: [],
|
||||
// 엑셀변환시 데이타 가공이 추가로 필요하게 된다면 여기에 가공된 rowData 를 넣어야 할듯
|
||||
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
|
||||
sheetName: null, // 갑이 없으면 'Sheet1'
|
||||
},
|
||||
},
|
||||
};
|
||||
// console.log("this.pageData",this.pageData)
|
||||
|
||||
const myDetail = [
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '프로그램ID',
|
||||
valueNm: 'prgmId',
|
||||
readonly: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '프로그램명',
|
||||
valueNm: 'prgmNm',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '프로그램구분',
|
||||
valueNm: 'prgmTpCd',
|
||||
essential: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
list: [
|
||||
{ text: '프로그램', value: '1' },
|
||||
{ text: '팝업', value: '2' },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '사용여부',
|
||||
valueNm: 'useFg',
|
||||
essential: true,
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '프로그램URL',
|
||||
valueNm: 'url',
|
||||
disabled: false,
|
||||
cols: 12,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '등록자NO',
|
||||
valueNm: 'regUserNo',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '등록일시',
|
||||
valueNm: 'regDttm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '수정자NO',
|
||||
valueNm: 'procUserNo',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '수정일시',
|
||||
valueNm: 'procDttm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
</style>
|
||||
452
pages/comm/base/ReadObjectMngPage.vue
Normal file
452
pages/comm/base/ReadObjectMngPage.vue
Normal file
@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<component :is="'SelectCommEng'" :parentPrgmId="myPrgmId" />
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col :cols="2" class="text-right">
|
||||
<BtnSearch @click="search" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-col cols="12" lg="5" class="h100">
|
||||
<v-card class="py-5 h100">
|
||||
<v-card-title>
|
||||
<span class="tit ft-size_20 ft-weight_600">검침대상 리스트</span>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<div ref="gridParent" class="h100 w100">
|
||||
<component
|
||||
ref="myGrid"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="myPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="7" class="h100">
|
||||
<v-card class="py-5 h100">
|
||||
<v-card-title class="d-flex justify-between">
|
||||
<span class="tit ft-size_20 ft-weight_600">검침대상 상세</span>
|
||||
<div>
|
||||
<v-btn
|
||||
class="v-btn-radius__20 v-btn-bg__white-blue mr-1"
|
||||
@click="addRow"
|
||||
>
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
<span>추가</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="v-btn-radius__20 v-btn-bg__white-blue mr-1"
|
||||
@click="removeRow"
|
||||
>
|
||||
<v-icon>mdi-delete-outline</v-icon>
|
||||
<span>삭제</span>
|
||||
</v-btn>
|
||||
<v-btn class="v-btn-radius__20 v-btn-bg__blue mr-1" @click="save">
|
||||
<v-icon>mdi-content-save</v-icon>
|
||||
<span>저장</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-row>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="회사코드"
|
||||
valueNm="comId"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="검침대상코드"
|
||||
valueNm="mttCd"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="검칭대상명칭"
|
||||
valueNm="mttNm"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="검칭대상유형"
|
||||
valueNm="mttNm"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="tCo2 환산계수"
|
||||
valueNm="co2CvrtCoef"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="TOE 환산계수"
|
||||
valueNm="toeCvrtCoef"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="TJ 환산계수"
|
||||
valueNm="tjCvrtCoef"
|
||||
:disabled="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component
|
||||
:is="'SelectUseFg'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
diffModel="modifyUseFg"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component :is="'SelectMttGrp'" :parentPrgmId="myPrgmId" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component :is="'SelectUnit'" :parentPrgmId="myPrgmId" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component
|
||||
:is="'SelectUseFg'"
|
||||
label="EMS 사용여부"
|
||||
:parentPrgmId="myPrgmId"
|
||||
diffModel="modifyEmsUseFg"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import SelectCommEng from '@/components/common/select/SelectCommEng';
|
||||
import SelectMttGrp from '@/components/common/select/SelectMttGrp';
|
||||
import SelectUseFg from '@/components/common/select/SelectUseFg';
|
||||
import SelectUnit from '@/components/common/select/SelectUnit';
|
||||
import SelectEqpmGrpKind from '@/components/common/select/SelectEqpmGrpKind';
|
||||
import InputText from '@/components/common/input/InputText';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import Grid from '~/components/common/Grid';
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
export default {
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
SelectCommEng,
|
||||
SelectMttGrp,
|
||||
SelectUseFg,
|
||||
SelectUnit,
|
||||
SelectEqpmGrpKind,
|
||||
InputText,
|
||||
BtnSearch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
gridName: 'rowGrid',
|
||||
loadGrid: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData: state => state.pageData[myPrgmId],
|
||||
}),
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
selectedCommCdData() {
|
||||
return this.pageData.selectedCommCdData;
|
||||
},
|
||||
chkUseFg() {
|
||||
// 사용여부 선택 감지
|
||||
return this.pageData.useFg;
|
||||
},
|
||||
modifyEqpmGrpNm() {
|
||||
return this.pageData.modifyEqpmGrpNm;
|
||||
},
|
||||
modifyEqpmGrpKind() {
|
||||
return this.pageData.modifyEqpmGrpKind;
|
||||
},
|
||||
modifyUseFg() {
|
||||
return this.pageData.modifyUseFg;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkUseFg() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
modifyEqpmGrpNm(val) {
|
||||
const isSameData = this.compareData('eqpmGrpNm', val);
|
||||
if (!isSameData) {
|
||||
const dt = {
|
||||
name: 'eqpmGrpNm',
|
||||
value: val,
|
||||
};
|
||||
this.$refs.myGrid.externalDataEdit(dt);
|
||||
}
|
||||
},
|
||||
modifyEqpmGrpKind(val) {
|
||||
const isSameData = this.compareData('eqpmGrpKind', val);
|
||||
if (!isSameData) {
|
||||
const dt = {
|
||||
name: 'eqpmGrpKind',
|
||||
value: val,
|
||||
};
|
||||
this.$refs.myGrid.externalDataEdit(dt);
|
||||
}
|
||||
},
|
||||
modifyUseFg(val) {
|
||||
const isSameData = this.compareData('useFg', val);
|
||||
if (!isSameData) {
|
||||
const dt = {
|
||||
name: 'useFg',
|
||||
value: val,
|
||||
};
|
||||
this.$refs.myGrid.externalDataEdit(dt);
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setGridData: 'setGridData',
|
||||
setGridColumn: 'setGridColumn',
|
||||
setGridOption: 'setGridOption',
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
}),
|
||||
init() {
|
||||
this.layoutInit();
|
||||
this.gridInit();
|
||||
},
|
||||
layoutInit() {
|
||||
const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
|
||||
this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
|
||||
const myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
bodyHeight: gridHeight,
|
||||
minBodyHeight: gridHeight,
|
||||
header: {
|
||||
height: 28,
|
||||
},
|
||||
rowHeight: 29,
|
||||
minRowHeight: 29,
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
value: myOptions,
|
||||
});
|
||||
const myColumns = [
|
||||
{ header: '검침대상코드', name: 'mttCd' },
|
||||
{ header: '검칭대상명칭', name: 'mttNm' },
|
||||
{ header: '회사코드', name: 'comId', hidden: true },
|
||||
// { header: "검침대상유형", name: "procDttm", hidden: true },
|
||||
{ header: 'tCo2 환산계수', name: 'co2CvrtCoef', hidden: true },
|
||||
{ header: 'TOE 환산계수', name: 'tjCvrtCoef', hidden: true },
|
||||
{ header: 'TJ 환산계수', name: 'toeCvrtCoef', hidden: true },
|
||||
{ header: '사용여부', name: 'useFg', hidden: true },
|
||||
{ header: '검침 그룹', name: 'mttGrp', hidden: true },
|
||||
{ header: '검침 단위', name: 'mttUnit', hidden: true },
|
||||
{ header: 'EMS 사용여부', name: 'emsUseFg', hidden: true },
|
||||
];
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
this.getRowGridData();
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
await this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getRowGridData() {
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectMtt',
|
||||
resKey: 'mttData',
|
||||
sendParam: {
|
||||
mttTp: this.pageData.commEngCd,
|
||||
menuId: '2',
|
||||
},
|
||||
});
|
||||
const newRes = res.map(item => {
|
||||
const newObj = {
|
||||
...item,
|
||||
rowStat: null,
|
||||
};
|
||||
return newObj;
|
||||
});
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (newRes.length > 0) {
|
||||
this.$refs['myGrid'].focus({
|
||||
rowKey: 0,
|
||||
columnName: 'eqpmGrp',
|
||||
setScroll: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async getRowData(data) {
|
||||
this.setPageData({
|
||||
selectedRowKey: data.rowKey,
|
||||
modifyEqpmGrp: data.eqpmGrp,
|
||||
modifyEqpmGrpNm: data.eqpmGrpNm,
|
||||
modifyEqpmGrpKind: data.eqpmGrpKind,
|
||||
modifyUseFg: data.useFg,
|
||||
regDttm: data.regDttm,
|
||||
procDttm: data.procDttm,
|
||||
selectedCommCdData: data,
|
||||
});
|
||||
},
|
||||
compareData(type, newDt) {
|
||||
if (this.selectedCommCdData[type] == newDt) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
addRow() {
|
||||
this.$refs.myGrid.addRow();
|
||||
},
|
||||
removeRow() {
|
||||
this.$refs.myGrid.removeRow();
|
||||
},
|
||||
async save() {
|
||||
const dataArr = this.$refs.myGrid.save();
|
||||
const sendParam = {
|
||||
datas: { dsGrpCd: dataArr },
|
||||
params: {},
|
||||
};
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'saveEqpmGrpMng',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
|
||||
await this.search();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
/* 검색옵션 */
|
||||
isFind: false,
|
||||
|
||||
commEngCd: 'MTT_ELEC',
|
||||
commEngList: [],
|
||||
|
||||
mttGrp: 'MTT_GAS',
|
||||
mttGrpList: [],
|
||||
unitCd: '008',
|
||||
unitList: [],
|
||||
comId: null,
|
||||
mttCd: null,
|
||||
mttNm: null,
|
||||
co2CvrtCoef: null,
|
||||
toeCvrtCoef: null,
|
||||
tjCvrtCoef: null,
|
||||
modifyUseFg: '1',
|
||||
modifyEmsUseFg: '1',
|
||||
|
||||
/* data 세팅 */
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
defaultRow: {
|
||||
mttCd: '',
|
||||
mttNm: '',
|
||||
comId: '',
|
||||
co2CvrtCoef: '',
|
||||
tjCvrtCoef: '',
|
||||
toeCvrtCoef: '',
|
||||
useFg: '1',
|
||||
mttGrp: '',
|
||||
mttUnit: '',
|
||||
emsUseFg: '1',
|
||||
},
|
||||
},
|
||||
|
||||
selectedCommCdData: null,
|
||||
selectedRowKey: null,
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
</style>
|
||||
301
pages/comm/base/SystemLogReadPage.vue
Normal file
301
pages/comm/base/SystemLogReadPage.vue
Normal file
@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<!-- 조회조견 -->
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="6">
|
||||
<!-- <component :is="'SelectDateVcTime'" :parentPrgmId="myPrgmId" /> -->
|
||||
<DatePicker
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'조회기간'"
|
||||
:timePicker="true"
|
||||
:labelCols="3"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<component :is="'UserPopPage'" :parentPrgmId="myPrgmId" />
|
||||
</v-col>
|
||||
<v-col :cols="2" class="text-right">
|
||||
<BtnSearch />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row ref="contents">
|
||||
<v-col :cols="12">
|
||||
<v-card>
|
||||
<div class="pa-5">
|
||||
<v-tabs v-model="tab">
|
||||
<v-tab v-for="item in items" :key="item.id">
|
||||
{{ item.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-tabs-items v-model="tab" class="py-6">
|
||||
<v-tab-item
|
||||
v-for="(item, idx) in items"
|
||||
:key="item.id"
|
||||
class="py-2"
|
||||
>
|
||||
<!-- <div ref="gridParent" class="py-5" style="height: calc(100% - 300px)"> -->
|
||||
<template v-if="item.id == 'loginLog'">
|
||||
<component
|
||||
:ref="gridNameTab1"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:gridName="gridNameTab1"
|
||||
:innerTabGridInfo="{ tab, idx }"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.id == 'menuCnctLog'">
|
||||
<component
|
||||
:ref="gridNameTab2"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:gridName="gridNameTab2"
|
||||
:innerTabGridInfo="{ tab, idx }"
|
||||
/>
|
||||
</template>
|
||||
<!-- </div> -->
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
// import SelectDateVcTime from "~/components/common/select/SelectDateVcTime";
|
||||
import UserPopPage from '~/components/common/modal/UserPopPage';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Utility from '~/plugins/utility';
|
||||
import DatePicker from '~/components/common/Datepicker';
|
||||
import DateUtility from '~/plugins/dateUtility';
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
export default {
|
||||
mixins: [mixinGlobal],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
// SelectDateVcTime,
|
||||
UserPopPage,
|
||||
BtnSearch,
|
||||
Grid,
|
||||
DatePicker,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
loadGrid: false,
|
||||
gridNameTab1: 'loginLogRowGrid',
|
||||
gridNameTab2: 'menuCnctLogRowGrid',
|
||||
tab: null,
|
||||
items: [
|
||||
{ name: '로그인 이력', id: 'loginLog' },
|
||||
{ name: '메뉴 접근 이력', id: 'menuCnctLog' },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
chkMyUserList() {
|
||||
// 사용자 선택 감지
|
||||
return this.pageData.myUserList;
|
||||
},
|
||||
chkFromDt() {
|
||||
// 조회기간 시작일 선택 감지
|
||||
return this.pageData.fromDt;
|
||||
},
|
||||
chkToDt() {
|
||||
// 조회기간 종료일 선택 감지
|
||||
return this.pageData.toDt;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkMyUserList() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
chkFromDt() {
|
||||
if (
|
||||
DateUtility.diff(
|
||||
Utility.setFormatDate(this.pageData.fromDt, 'YYYY-MM-DD'),
|
||||
Utility.setFormatDate(this.pageData.toDt, 'YYYY-MM-DD'),
|
||||
) < 0
|
||||
) {
|
||||
this.setPageData({
|
||||
toDt: Utility.setFormatDate(
|
||||
this.pageData.fromDt,
|
||||
'YYYY-MM-DD 23:59:59',
|
||||
),
|
||||
});
|
||||
}
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
chkToDt() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
await this.gridInit();
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.contents.offsetHeight - 200;
|
||||
const myOptions = {
|
||||
// minWidth: 100,
|
||||
scrollX: false,
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridNameTab1,
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridNameTab1,
|
||||
value: loginLogColumns,
|
||||
});
|
||||
this.setGridOption({
|
||||
gridKey: this.gridNameTab2,
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridNameTab2,
|
||||
value: menuCnctLogColumns,
|
||||
});
|
||||
|
||||
this.loadGrid = true;
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
await this.setPageData({ isFind: false });
|
||||
},
|
||||
async getRowGridData() {
|
||||
const sendParam = {
|
||||
// date: "2010-01-01 00:00:00 - 2021-08-31 23:59:00", => 이건 없어도 조회는 되는 듯,.
|
||||
comId: this.comId, // 회사별 고정값 => mixin/global 에서 불러옴
|
||||
userList: this.pageData.myUserList, // 선택된 사용자 userNo Array => 처음부터 사용자 지정없으면 조회 안됨, 전체기능은 없는듯,.
|
||||
// userList: ["2", "3"], // 선택된 사용자 userNo Array => 처음부터 사용자 지정없으면 조회 안됨, 전체기능은 없는듯,.
|
||||
frDttm: this.pageData.fromDt, // "2018-01-01 00:00:00", //
|
||||
endDttm: this.pageData.toDt, // "2021-08-31 23:59:00" //
|
||||
// frDttm: "2021-01-01 00:00:00", //
|
||||
// endDttm: "2021-08-31 23:59:00" //
|
||||
};
|
||||
const resTab1 = await this.postApiReturn({
|
||||
apiKey: 'selectLoginLog',
|
||||
resKey: 'loginLogData',
|
||||
sendParam,
|
||||
});
|
||||
this.setGridData({
|
||||
gridKey: this.gridNameTab1,
|
||||
value: resTab1,
|
||||
});
|
||||
const resTab2 = await this.postApiReturn({
|
||||
apiKey: 'selectMenuCnctLog',
|
||||
resKey: 'menuCnctLogData',
|
||||
|
||||
sendParam,
|
||||
});
|
||||
this.setGridData({
|
||||
gridKey: this.gridNameTab2,
|
||||
value: resTab2,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
/* 검색옵션 */
|
||||
cmCycle: 'CYC_HOUR', // 주기
|
||||
defaultRange: {
|
||||
CYC_HOUR: 'no limite',
|
||||
},
|
||||
fromDt: '',
|
||||
toDt: '',
|
||||
myUserList: '',
|
||||
|
||||
selecUserList: [], // 선택된 사용자 데이타
|
||||
selecUserListRowKeys: [], // 선택된 사용자 데이타
|
||||
|
||||
isFind: false,
|
||||
|
||||
modalData: {}, // 모달 관련 데이타 저장소
|
||||
|
||||
/* data 세팅 */
|
||||
loginLogRowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
},
|
||||
menuCnctLogRowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
},
|
||||
};
|
||||
|
||||
const loginLogColumns = [
|
||||
{
|
||||
header: '사용자NO',
|
||||
name: 'userNo',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
hidden: true,
|
||||
},
|
||||
{ header: '사용자ID', name: 'userLoginId', align: 'center', width: 200 },
|
||||
{ header: '사용자명', name: 'userNm', align: 'center', width: 200 },
|
||||
{ header: '로그인일시', name: 'loginDttm', align: 'center' },
|
||||
];
|
||||
|
||||
const menuCnctLogColumns = [
|
||||
{
|
||||
header: '사용자NO',
|
||||
name: 'userNo',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
hidden: true,
|
||||
},
|
||||
{ header: '사용자ID', name: 'userLoginId', align: 'center', width: 200 },
|
||||
{ header: '사용자명', name: 'userNm', align: 'center', width: 200 },
|
||||
{ header: '메뉴명', name: 'menuNm', align: 'left' },
|
||||
{ header: '메뉴 접근 일시', name: 'menuCnctDttm', align: 'center' },
|
||||
];
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/common.scss';
|
||||
</style>
|
||||
560
pages/comm/base/WidgetMngPage.vue
Normal file
560
pages/comm/base/WidgetMngPage.vue
Normal file
@ -0,0 +1,560 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<!-- 조회조건 -->
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<component
|
||||
:is="'selectCodeList'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'사용여부'"
|
||||
:dataKey="'selectUseFg'"
|
||||
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
|
||||
:addAll="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<InputText
|
||||
:parentPrgmId="myPrgmId"
|
||||
label="위젯명"
|
||||
valueNm="widgetNm"
|
||||
:searchOption="true"
|
||||
:labelCols="3"
|
||||
:textCols="9"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="5" class="text-right">
|
||||
<BtnSearch />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row ref="contents">
|
||||
<!-- 위젯 리스트 -->
|
||||
<v-col :cols="5" class="h100">
|
||||
<v-card class="pb-5">
|
||||
<v-card-title>위젯 리스트</v-card-title>
|
||||
<div style="height:calc(100% - 70px)">
|
||||
<div ref="gridParent" class="px-5 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:gridName="gridName"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- 위젯 상세 -->
|
||||
<v-col :cols="7" class="h100">
|
||||
<v-card class="pb-5">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">위젯 상세</v-card-title>
|
||||
<div>
|
||||
<Buttons
|
||||
:parentPrgmId="myPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailList"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 h100" style="height:calc(100% - 70px)">
|
||||
<div class="w100">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:detailList="detailList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
<v-row class="search-box py-2" align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
썸네일 첨부
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="10">
|
||||
<v-file-input
|
||||
multiple
|
||||
background-color="#47535c"
|
||||
show-size
|
||||
v-model="fileData"
|
||||
hide-details="true"
|
||||
>
|
||||
</v-file-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="search-box py-2" align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
썸네일
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="10" class="h100">
|
||||
<!-- <div class="wrapper-image"> -->
|
||||
<img
|
||||
ref="uploadItemImage"
|
||||
id="itemImage"
|
||||
src=""
|
||||
style="width: 100%; height: 270px; border: 1px solid; object-fit: cover;"
|
||||
/>
|
||||
<!-- </div> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
// import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
import InputText from '@/components/common/input/InputText';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Form from '~/components/common/form/Form';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
export default {
|
||||
mixins: [mixinGlobal],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
selectCodeList,
|
||||
Form,
|
||||
Grid,
|
||||
BtnSearch,
|
||||
Buttons,
|
||||
InputText,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
loadGrid: false,
|
||||
gridName: 'rowGrid',
|
||||
// rowGridOrigin: [],
|
||||
detailList: myDetail,
|
||||
fileData: null,
|
||||
gridRowKey: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
chkUseFg() {
|
||||
return this.pageData.selectUseFg;
|
||||
},
|
||||
chkRowGridSelectKey() {
|
||||
return this.pageData.rowGridSelectKey;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
chkUseFg() {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
async fileData(val) {
|
||||
if (val != null && typeof val == 'object') {
|
||||
var fileList = this.fileData;
|
||||
var formData = new FormData();
|
||||
var thumbnail = null;
|
||||
if (fileList !== null) {
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
formData.append('file', fileList[i]);
|
||||
}
|
||||
const apndFileUuid = this.postUpdateApi({
|
||||
apiKey: 'selectFileToBase64',
|
||||
resKey: 'apndFileUuid',
|
||||
sendParam: formData,
|
||||
});
|
||||
|
||||
await apndFileUuid.then(apndFileUuid => {
|
||||
thumbnail = apndFileUuid.data.dataset.apndFileUuid;
|
||||
});
|
||||
|
||||
var data = {
|
||||
columnName: 'widgetThumbnail',
|
||||
value: atob(thumbnail),
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
|
||||
var data2 = {
|
||||
columnName: 'widgetThumbnailFile',
|
||||
value: val[0].name,
|
||||
};
|
||||
this.$refs[this.gridName].editingFinish(data2);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.gridInit();
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 36;
|
||||
|
||||
const myOptions = {
|
||||
scrollX: false,
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
// value: myOptions
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
{ header: '위젯ID', name: 'widgetId' },
|
||||
{ header: '위젯명', name: 'widgetNm' },
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
value = value === true ? '1' : '0';
|
||||
const newValue = _this.pageData.selectUseFgList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
return newValue[0].commCdNm;
|
||||
},
|
||||
},
|
||||
{ header: '파일', name: 'widgetThumbnailFile' },
|
||||
{ header: '썸네일', name: 'widgetThumbnail', hidden: true },
|
||||
{ header: '위젯설명', name: 'widgetDesc', hidden: true },
|
||||
{ header: '프로그램ID', name: 'prgmId', hidden: true },
|
||||
{ header: '등록자NO', name: 'regUserNo', hidden: true },
|
||||
{ header: '등록일시', name: 'regDttm', hidden: true },
|
||||
{ header: '수정자NO', name: 'procUserNo', hidden: true },
|
||||
{ header: '수정일시', name: 'procDttm', hidden: true },
|
||||
];
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
// this.getRowGridData();
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
await this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getRowGridData() {
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectWidget',
|
||||
resKey: 'widgetData',
|
||||
sendParam: {
|
||||
useFg: this.chkUseFg,
|
||||
prgmNm: this.pageData.prgmNm, // 검색키워드: 프로그램명
|
||||
},
|
||||
});
|
||||
const newRes = res.map(item => {
|
||||
const newObj = {
|
||||
...item,
|
||||
rowStat: null,
|
||||
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
|
||||
};
|
||||
return newObj;
|
||||
});
|
||||
|
||||
// 엑셀 다운로드용 데이터 재정렬
|
||||
this.xlsDataBind(res);
|
||||
// this.rowGridOrigin = Utility.copyObj(newRes);
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (newRes.length > 0) {
|
||||
this.$refs[this.gridName].focus({
|
||||
// rowKey: this.chkRowGridSelectKey || 0,
|
||||
rowKey: 0,
|
||||
setScroll: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async getRowData(data, gridName) {
|
||||
if (data.rowStat === 'I') {
|
||||
this.detailList[0].disabled = false;
|
||||
} else {
|
||||
this.detailList[0].disabled = true;
|
||||
}
|
||||
this.gridRowKey = data.rowKey;
|
||||
|
||||
this.setPageData({
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: data,
|
||||
});
|
||||
if (data.widgetThumbnail == null) {
|
||||
itemImage.src = '';
|
||||
} else {
|
||||
itemImage.src = 'data:image/png;base64, ' + data.widgetThumbnail;
|
||||
}
|
||||
},
|
||||
compareData(type, newDt) {
|
||||
if (this.selectedCommCdData[type] == newDt) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
gridEditingFinish(data) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
async btnActions(action) {
|
||||
switch (action) {
|
||||
case 'add':
|
||||
this.$refs[this.gridName].addRow();
|
||||
this.detailList[0].disabled = false;
|
||||
break;
|
||||
|
||||
case 'remove':
|
||||
this.$refs[this.gridName].removeRow();
|
||||
break;
|
||||
|
||||
case 'save':
|
||||
var dataArr = this.$refs[this.gridName].save();
|
||||
if (dataArr.length > 0) {
|
||||
const sendParam = {
|
||||
datas: {
|
||||
dsWidget: dataArr.map(item => ({
|
||||
...item,
|
||||
useFg: item.useFg ? '1' : '0',
|
||||
})),
|
||||
},
|
||||
params: {},
|
||||
};
|
||||
for (var i = 0; i < sendParam.datas.dsWidget.length; i++) {
|
||||
var prgmChk = sendParam.datas.dsWidget[i].widgetNm;
|
||||
}
|
||||
if (prgmChk == null || prgmChk == undefined || prgmChk == '') {
|
||||
alert('위젯명을 입력하세요.');
|
||||
} else {
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'saveWidget',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
} else {
|
||||
alert('저장할 내용이 없습니다.');
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
xlsDataBind(res) {
|
||||
const xlsRowData = res.map(item => {
|
||||
const obj = {
|
||||
...item,
|
||||
useFg: item.useFg == '1' ? '사용' : '사용안함',
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
this.setPageData({
|
||||
xlsFileInfo: {
|
||||
[this.gridName]: {
|
||||
rowData: xlsRowData,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
selectUseFg: false,
|
||||
selectUseFgList: [],
|
||||
|
||||
prgmNm: '',
|
||||
|
||||
/* 검색옵션 */
|
||||
isFind: false,
|
||||
|
||||
/* data 세팅 */
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [], // myColumns,
|
||||
option: {}, // myOptions
|
||||
defaultRow: {
|
||||
widgetId: null,
|
||||
widgetNm: null,
|
||||
widgetDesc: null,
|
||||
widgetThumbnailFile: null,
|
||||
widgetThumbnail: null,
|
||||
prgmId: null,
|
||||
useFg: true,
|
||||
regUserNo: null,
|
||||
regDttm: null,
|
||||
procUserNo: null,
|
||||
procDttm: null,
|
||||
rowStat: null,
|
||||
},
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
rowGridModify: false,
|
||||
buttonAuth: {
|
||||
add: true,
|
||||
remove: true,
|
||||
save: true,
|
||||
excel: true,
|
||||
},
|
||||
},
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
rowGridModify: false,
|
||||
|
||||
xlsFileInfo: {
|
||||
// 출력하려는 grid 와 같은 이름으로 세팅
|
||||
rowGrid: {
|
||||
rowData: [],
|
||||
// 엑셀변환시 데이타 가공이 추가로 필요하게 된다면 여기에 가공된 rowData 를 넣어야 할듯
|
||||
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
|
||||
sheetName: null, // 갑이 없으면 'Sheet1'
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const myDetail = [
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '위젯ID',
|
||||
valueNm: 'widgetId',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '위젯명',
|
||||
valueNm: 'widgetNm',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '프로그램 ID',
|
||||
valueNm: 'prgmId',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '사용여부',
|
||||
valueNm: 'useFg',
|
||||
essential: true,
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'TextArea',
|
||||
label: '위젯 설명',
|
||||
valueNm: 'widgetDesc',
|
||||
disabled: false,
|
||||
cols: 12,
|
||||
textCols: 10,
|
||||
rows: 4,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '등록자NO',
|
||||
valueNm: 'regUserNo',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '등록일시',
|
||||
valueNm: 'regDttm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '수정자NO',
|
||||
valueNm: 'procUserNo',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: '수정일시',
|
||||
valueNm: 'procDttm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-text-field__details {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
59
pages/comm/base/WidgetPopPage.vue
Normal file
59
pages/comm/base/WidgetPopPage.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div style="margin: 10px;">
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<component
|
||||
:is="card1Loader"
|
||||
:parentPrgmId="this.$route.query.prgmId"
|
||||
:widgetPrgmId="false"
|
||||
:widgetPopFg="false"
|
||||
:widgetReflashMm="15*60000"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import Utility from "~/plugins/utility";
|
||||
import Grid from "~/components/common/Grid";
|
||||
import Chart from "~/components/common/Chart";
|
||||
|
||||
export default {
|
||||
layout: "pop",
|
||||
components: {
|
||||
Utility,
|
||||
Grid,
|
||||
Chart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
card0: this.$router.currentRoute.query.widgetId
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state){
|
||||
return state.pageData[this.$route.query.prgmId];
|
||||
},
|
||||
isDarkMode: "isDarkMode",
|
||||
}),
|
||||
card1Loader(){
|
||||
|
||||
const tab0 = this.card0 == null ? 'BlankWidget' : this.card0
|
||||
return () => import(`@/components/widget/${tab0}`)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations({
|
||||
|
||||
}),
|
||||
...mapActions({
|
||||
|
||||
}),
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">@import "@/assets/scss/common.scss" </style>
|
||||
Reference in New Issue
Block a user