Commit @8557e0c9006e46c65e114506a0c74fb4b38baf4e

박정하 03-05

250305 박정하 데이터 활용관리 레이아웃 탭 오류 및 레이아웃 삭제 수정

@8557e0c9006e46c65e114506a0c74fb4b38baf4e

0e278d4

8557e0c

client/views/component/style/StyleSheetComponent.vue

--- client/views/component/style/StyleSheetComponent.vue

+++ client/views/component/style/StyleSheetComponent.vue


 <template>
   <FontOption v-if="fontAt" />
-  <CellOption :borderStyle="styleSheet.borderStyle" v-if="cellAt" />
-  <BackgroundOption :background_style="styleSheet.background_style" v-if="backgroundAt" />
+  <CellOption v-if="cellAt" :borderStyle="styleSheet.borderStyle" />
+  <BackgroundOption v-if="backgroundAt" :background_style="styleSheet.background_style" />
 </template>
 <script>
 import BackgroundOption from "./BackgroundOption.vue";

       backgroundAt: false,
     };
   },
+  created() {
+    this.init();
+  },
   watch: {
-    styleSheet: function (v) {
-      this.cellAt = v.borderStyle != null;
-      this.backgroundAt = v.background_style != null;
+    styleSheet: {
+      handler(v) {
+        this.init();
+      },
+      deep: true
     },
   },
+  methods: {
+    init() {
+      this.cellAt = this.styleSheet.borderStyle != null;
+      this.backgroundAt = this.styleSheet.background_style != null;
+    }
+  },
   components: {
     BackgroundOption: BackgroundOption,
     CellOption: CellOption,

0e278d4

8557e0c

client/views/component/treeMenu/LayoutTree.vue

--- client/views/component/treeMenu/LayoutTree.vue

+++ client/views/component/treeMenu/LayoutTree.vue


       </template>
       <template v-else>
         <svg-icon type="mdi" :width="18" :height="18" :path="dotPath" />
-        <svg-icon type="mdi" :width="18" :height="18" :path="layoutPath" :color="'#fbbe28'" />
+        <template v-if="splitInfo.se == 'splitter'">
+          <svg-icon type="mdi" v-if="splitInfo.useSj" :width="18" :height="18" :path="titlePath" :color="'#fbbe28'" />
+          <svg-icon type="mdi" v-else :width="18" :height="18" :path="layoutPath" :color="'#fbbe28'" />
+        </template>
+        <svg-icon type="mdi" v-if="splitInfo.se == 'component'" :width="18" :height="18" :path="filePath" :color="'#fbbe28'" />
       </template>
       <p class="node-text">{{ splitInfo.layout_nm }}</p>
     </div>
-    <ul v-if="splitInfo.children.length > 0" class="children-node" :style="{ height: toggleSelect ? 'auto' : '0' }">
+    <ul v-if="splitInfo.children.length > 0" class="children-node">
       <TreeItem v-for="(node, indx) in splitInfo.children" :splitInfo="node" :selectLayout='selectLayout' :key="indx" @onChange="onChange" />
     </ul>
   </li>
 </template>
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiLandPlots, mdiChevronRight, mdiRhombusSplit, mdiCircleSmall, mdiCropSquare } from '@mdi/js';
+import { mdiLandPlots, mdiChevronRight, mdiRhombusSplit, mdiCircleSmall, mdiCropSquare, mdiFormatTitle } from '@mdi/js';
 export default {
   components: {
     'SvgIcon': SvgIcon

   },
   data() {
     return {
-      currentSelectLayout: this.selectLayout,
-      toggleSelect: false,
-      clidrunNode: false,
       folderPath: mdiLandPlots,
       layoutPath: mdiCropSquare,
       arrowPath: mdiChevronRight,
       filePath: mdiRhombusSplit,
-      selectedId: null,
-      parentSelectNode: null,
       dotPath: mdiCircleSmall,
+      titlePath: mdiFormatTitle,
+
+      currentSelectLayout: this.selectLayout,
     }
   },
   watch: {

   },
   methods: {
     clickLayout(splitInfo) {
-      this.toggleSelect = !this.toggleSelect;
       this.$emit('onChange', splitInfo);
     },
 

 
 .children-node {
   padding: 0 0 0 10px;
-  overflow: hidden;
-  transition: max-height 0.5s ease-in-out;
 }
 
 .node-text {

0e278d4

8557e0c

client/views/pages/custom/InsertDataAnalytics.vue

--- client/views/pages/custom/InsertDataAnalytics.vue

+++ client/views/pages/custom/InsertDataAnalytics.vue


                     <div class="tabnav3">
                       <ul class="flex justify-start align-center">
                         <template v-for="(item, idx) of optionList" :key="idx">
-                          <li class="cursor" v-if="item.useAt" @click="fnChangeTab('opt', item.id)">
+                          <li class="cursor" v-show="item.useAt" @click="fnChangeTab('opt', item.id)">
                             <p :class="{ activeOption: activeOption === item.id }">{{ item.name }}</p>
                           </li>
                         </template>
                       </ul>
                     </div>
-                    <div v-if="activeOption == 'LAYOUT'">
+                    <div v-if="activeOption === 'LAYOUT'">
                       <StyleSheet :styleSheet="currentLayout.styleSheet" />
                     </div>
-                    <div v-if="activeOption == 'TITLE'">
+                    <div v-if="activeOption === 'TITLE'">
                       <div class="table-zone">
                         <p class="object-title mb5">타이틀 사용 여부</p>
                         <div class="input-container flex">
                           <label class="radio-label">
-                            <input type="radio" name="titleUseAt" class="custom-radiobox" :value="true" v-model="currentLayout.useSj">
+                            <input type="radio" name="titleUseAt" class="custom-radiobox" :value="true" v-model="isUseSj" @change="fnChangeUseSj">
                             <span>사용</span>
                           </label>
                           <label class="radio-label">
-                            <input type="radio" name="titleUseAt" class="custom-radiobox" :value="false" v-model="currentLayout.useSj">
+                            <input type="radio" name="titleUseAt" class="custom-radiobox" :value="false" v-model="isUseSj" @change="fnChangeUseSj">
                             <span>미사용</span>
                           </label>
                         </div>

                         </div>
                       </div>
                     </div>
-                    <div v-if="activeOption == 'COMPONENT'">
+                    <div v-if="activeOption === 'COMPONENT'">
                       <StyleSheet :styleSheet="currentLayout.styleSheet" />
                     </div>
                   </div>

                               <span>{{ item.group_nm }}</span>
                             </p>
                             <div>
-                              <button class="blue-border-btn set-btn" @click.stop="" @click="fnModalOpen(item, idx)"> 설정 </button>
-                              <button class="red-border-btn set-btn" @click.stop="" @click="deleteDiagram(item)"> 삭제 </button>
+                              <button class="blue-border-btn set-btn" @click.stop="" @click="fnModalOpen(item, idx)">설정</button>
+                              <button class="red-border-btn set-btn" @click.stop="" @click="deleteDiagram(item)">삭제</button>
                             </div>
                           </div>
                         </div>

       isModalOpen: false,
       isTabZoneOpen: false,
       isAttributeOpen: false,
+      isUseSj: false,
 
       activeTab: "pageInfo",
       activeOption: "LAYOUT",

 
   computed: {},
 
-  watch: {},
+  watch: {
+    // 컴포넌트 사용 여부
+    'currentLayout.component'(newVal, oldVal) {
+      if (!this.$isEmpty(newVal)) {
+        this.currentLayout.se = 'component'
+      }
+    },
+  },
 
   methods: {
     // 초기화
     async init() {
-      // 탭, 옵션 초기화
-      this.$activeTab = "pageInfo";
-      this.activeOption = "LAYOUT";
       this.activeIndex = null;
 
       // 페이지 정보 초기화
-      this.initPageInfo();
+      this.customTitle = null;
+      this.customComment = null;
+      this.public_at = true;
 
       // 레이아웃 초기화
       let splitInfo = _.cloneDeep(this.$getDefaultJobGroup().customSplitter);

       splitInfo.styleSheet.borderStyle = Object.assign({}, this.$getDefaultJobGroup().borderStyle);
       splitInfo.styleSheet.background_style = Object.assign({}, this.$getDefaultJobGroup().background_style);
       this.splitInfo = splitInfo;
+      this.fnSelectLayout(splitInfo); // 레이아웃 선택
 
       // 데이터 초기화
       this.jobGroupList = [];
-
-      this.initCurrent(this.splitInfo); // 현재 작업 객체 초기화
-    },
-
-    // 페이지 정보 초기화
-    initPageInfo() {
-      this.customTitle = null;
-      this.customComment = null;
-      this.public_at = true;
-    },
-
-    // 현재 작업 객체 초기화
-    initCurrent(layout) {
-      this.currentLayout = layout;
-
-      // 레이어에 컴포넌트를 생성한 경우
-      let component = layout.component;
-      if (component != null) {
-        // 컴포넌트 선택
-        this.activeIndex = null; // 초기화
-        this.chartComponent.forEach((item, idx) => {
-          if (item.id === component.component_itm.chart_knd) {
-            this.activeIndex = idx;
-          }
-        });
-
-        // 컬럼 정보 변경
-        this.dataX = component.component_itm.categoryAxis;
-        this.dataY = component.component_itm.valueAxis;
-        this.currentCalc = component.component_itm.chart_cal;
-
-        // 현재 잡그룹 변경
-        if (component.jobInfo.length > 0) {
-          this.currentJobGroupIdx = null;
-          this.currentJobGroup = component.jobInfo[0];
-
-          // 현재 데이터테이블 변경
-          if (this.currentJobGroup.jobItms.length === 0) {
-            this.currentDataTable = Object.assign({}, this.$getDefaultObject().dataTable);
-          } else {
-            const index = this.currentJobGroup.jobItms.length - 1;
-            this.currentDataTable = this.currentJobGroup.jobItms[index].dataTable;
-          }
-
-          this.onChangeChartData(); // 차트 데이터 수정
-
-          return;
-        }
-      }
-
-      this.currentJobGroupIdx = null;
-      this.currentJobGroup = Object.assign({}, this.$getDefaultObject().jobGroup);
-      this.initColumnInfo(); // 현재 컬럼 정보 초기화
     },
 
     // 현재 컬럼 정보 초기화

           // 레이아웃
           let resSplitterInfo = response.data.resultData.splitterInfo;
           vm.splitInfo = resSplitterInfo;
-          vm.currentLayout = vm.splitInfo;
+          this.fnSelectLayout(vm.splitInfo); // 레이아웃 선택
 
           // 데이터 목록
           let resjobGroupList = response.data.resultData.jobGroupList;

     },
 
     // 현재 탭 변경
-    fnChangeTab(type, current) {
+    fnChangeTab(type, value) {
+      console.log("current: ", value)
       if (type == "nav") {
-        this.activeTab = current;
+        this.activeTab = value;
       } else if (type == "opt") {
-        this.activeOption = current;
+        this.activeOption = value;
       }
     },
 

     // 레이아웃 및 컴포넌트 더보기 버튼 동작
     fnAttributeToggle() {
       this.isAttributeOpen = !this.isAttributeOpen;
+    },
+
+    // 타이틀 사용 여부
+    async fnChangeUseSj() {
+      const isCheck = await this.$showConfirm("경고", "타이틀 사용 여부 변경 시 작업 중인 데이터가 삭제됩니다.<br>타이틀을 사용 여부를 변경 하시겠습니까?");
+      if (isCheck) {
+        this.currentLayout.useSj = this.isUseSj;
+        this.currentLayout.se = 'splitter';
+
+        if (this.currentLayout.useSj) {
+          this.currentLayout.component = null; // 컴포넌트 초기화
+        } else {
+          this.currentLayout.layoutSj = _.cloneDeep(this.$getDefaultObject().layoutSj); // 타이틀 초기화
+        }
+      } else {
+        this.isUseSj = this.currentLayout.useSj;
+      }
     },
 
     // 유효성 검사 - 컴포넌트 추가

     fnSelectLayout(layout) {
       console.log("layout: ", layout);
 
+      // 현재 레이아웃 변경
       this.currentLayout = layout;
 
+      // 현재 레이아웃에 따른 레이아웃 탭 옵션
       this.optionList = [
         { id: "LAYOUT", name: "레이아웃", useAt: true },
         { id: "TITLE", name: "타이틀", useAt: layout.children.length == 0 },
         { id: "COMPONENT", name: "컴포넌트", useAt: !this.$isEmpty(layout.component) },
       ];
+      this.fnChangeTab("opt", "LAYOUT"); // 탭 변경
 
-      this.initCurrent(layout); // 현재 작업 객체 초기화
+      // 현재 레이아웃에 컴포넌트가 있는 경우
+      this.activeIndex = null; // 초기화
+
+      let component = layout.component;
+      if (component != null) {
+        for (let i = 0; i < this.chartComponent.length; i++) {
+          let item = this.chartComponent;
+          if (item.id === component.component_itm.chart_knd) {
+            this.activeIndex = i;
+            break;
+          }
+        }
+
+        // 컬럼 정보 변경
+        this.dataX = component.component_itm.categoryAxis;
+        this.dataY = component.component_itm.valueAxis;
+        this.currentCalc = component.component_itm.chart_cal;
+
+        // 현재 잡그룹 변경
+        if (component.jobInfo.length > 0) {
+          this.currentJobGroupIdx = null;
+          this.currentJobGroup = component.jobInfo[0];
+
+          // 현재 데이터테이블 변경
+          if (this.currentJobGroup.jobItms.length === 0) {
+            this.currentDataTable = Object.assign({}, this.$getDefaultObject().dataTable);
+          } else {
+            const index = this.currentJobGroup.jobItms.length - 1;
+            this.currentDataTable = this.currentJobGroup.jobItms[index].dataTable;
+          }
+
+          this.onChangeChartData(); // 차트 데이터 수정
+          return;
+        }
+      }
+
+      this.currentJobGroupIdx = null;
+      this.currentJobGroup = Object.assign({}, this.$getDefaultObject().jobGroup);
+      this.initColumnInfo(); // 현재 컬럼 정보 초기화
     },
 
     findLoop(item) {

         return;
       }
 
-      let parentLayout = this.findParentLayout(
-        this.splitInfo,
-        this.currentLayout.parents_splitter_id
-      );
+      let parentLayout = this.findParentLayout(this.splitInfo, this.currentLayout.parents_splitter_id);
 
-      //선택한 레이아웃의 형제정보 찾기
-      let otherIdx = parentLayout.children.findIndex(
-        (item) => item.layout_nm !== this.currentLayout.layout_nm
-      );
-      let otherSplit = parentLayout.children[otherIdx];
-      //otherSplit의 component, children 정보 가져오기
-      let otherComponent = otherSplit.component;
-      let otherChildren = otherSplit.children;
-      let layoutSize1 = otherSplit.layout_size1;
-      let layoutSize2 = otherSplit.layout_size2;
-      let layoutType = otherSplit.layout_type;
-      let se = otherSplit.se;
-      let size = otherSplit.size;
-      let styleSheet = otherSplit.styleSheet;
-
-      // 부모 레이아웃에 다른 split의 정보 넣어 주기
-      parentLayout.component = otherComponent;
-      parentLayout.children = otherChildren;
-      parentLayout.layout_size1 = layoutSize1;
-      parentLayout.layout_size2 = layoutSize2;
-      parentLayout.layout_type = layoutType;
-      parentLayout.se = se;
-      parentLayout.size = size;
-      parentLayout.styleSheet = styleSheet;
-
-      // 자식에게서 가져온 자식의 자식 정보의 부모 정보 변경
       if (parentLayout.children.length > 0) {
-        parentLayout.children.forEach((item) => {
-          item.parents_splitter_id = parentLayout.layout_nm;
-        });
+        let copy = _.cloneDeep(parentLayout.children.filter((item) => item !== this.currentLayout));
+        console.log("copy: ", copy);
+
+        if (copy.length == 1) {
+          parentLayout.se = copy[0].se;
+          parentLayout.type = copy[0].type;
+          parentLayout.min_width = copy[0].min_width;
+          parentLayout.min_height = copy[0].min_height;
+          parentLayout.layout_size1 = copy[0].layout_size1;
+          parentLayout.layout_size2 = copy[0].layout_size2;
+          parentLayout.layout_type = copy[0].layout_type;
+          parentLayout.styleSheet = copy[0].styleSheet;
+          parentLayout.children = copy[0].children;
+          parentLayout.component = copy[0].component;
+          parentLayout.active = copy[0].active;
+          parentLayout.layoutSj = copy[0].layoutSj;
+          parentLayout.sizes = copy[0].sizes;
+          parentLayout.useSj = copy[0].useSj;
+
+          return;
+        }
       }
+
+      parentLayout.children = parentLayout.children.filter((item) => item !== this.currentLayout);
     },
 
     // 부모 요소 검색
-    findParentLayout(splitInfo, selectParentLayoutId) {
-      // splitInfo가 배열인 경우 각 요소에 대해 재귀적으로 함수를 호출
-      if (Array.isArray(splitInfo)) {
-        for (let i = 0; i < splitInfo.length; i++) {
-          let result = this.findParentLayout(
-            splitInfo[i],
-            selectParentLayoutId
-          );
-          if (result) return result; // 일치하는 부모 레이아웃을 찾으면 반환
-        }
+    findParentLayout(layout, parentId) {
+      let result = null;
+      if (layout.layout_nm === parentId) {
+        result = layout;
       } else {
-        // 현재 splitInfo 객체의 layout_nm이 찾고자 하는 selectParentLayoutId와 일치하는지 확인
-        if (splitInfo.layout_nm === selectParentLayoutId) {
-          return splitInfo; // 일치하는 경우 현재 객체 반환
-        }
-
-        // 현재 객체의 자식들에 대해 재귀적으로 탐색
-        if (splitInfo.children && splitInfo.children.length > 0) {
-          return this.findParentLayout(
-            splitInfo.children,
-            selectParentLayoutId
-          );
+        if (layout.children.length > 0) {
+          for (let child of layout.children) {
+            result = this.findParentLayout(child, parentId);
+            if (result != null) {
+              break;
+            }
+          }
         }
       }
-
-      // 일치하는 요소를 찾지 못한 경우
-      return null;
+      return result;
     },
 
     // 취소 (데이터활용관리 목록으로 이동)

     // 잡그룹 선택
     async fnSelectJobGroup(jobGroup) {
       let component = this.currentLayout.component;
-      if (component != null && jobGroup.jobItms.length > 0) {
-        let index = jobGroup.jobItms.length - 1;
-        if (component.component_itm.dataTable == jobGroup.jobItms[index].dataTable) {
-          return;
+      if (component != null) {
+        if (jobGroup.jobItms.length > 0) {
+          let index = jobGroup.jobItms.length - 1;
+          if (component.component_itm.dataTable == jobGroup.jobItms[index].dataTable) {
+            return;
+          }
         }
-      }
-
-      if (!this.$isEmpty(component.component_itm.data_list)) {
-        let isCheck = await this.$showConfirm("경고", "컴포넌트 컬럼 설정 후, 다른 데이터를 선택할 경우 기존 정보가 삭제됩니다.<br>다른 데이터를 선택하시겠습니까?");
-        if (!isCheck) {
-          return;
+        if (!this.$isEmpty(component.component_itm.data_list)) {
+          let isCheck = await this.$showConfirm("경고", "컴포넌트 컬럼 설정 후, 다른 데이터를 선택할 경우 기존 정보가 삭제됩니다.<br>다른 데이터를 선택하시겠습니까?");
+          if (!isCheck) {
+            return;
+          }
         }
       }
 

 
     // 드랍 이벤트
     async onDrop(type) {
+      // 레이아웃인 경우 경고 후 실행 취소
+      if (this.currentLayout.children.length > 0) {
+        this.$showAlert("경고", "레이아웃은 설정할 수 없습니다.");
+        return;
+      }
+
       // 컴포넌트가 설정되지 않은 경우 경고 후 실행 취소
       if (this.$isEmpty(this.currentLayout.component)) {
         this.$showAlert("경고", "컴포넌트 등록 후 설정할 수 있습니다.");

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,7 +1,7 @@
1	1	<template>
2	2	<FontOption v-if="fontAt" />
3		- <CellOption :borderStyle="styleSheet.borderStyle" v-if="cellAt" />
4		- <BackgroundOption :background_style="styleSheet.background_style" v-if="backgroundAt" />
	3	+ <CellOption v-if="cellAt" :borderStyle="styleSheet.borderStyle" />
	4	+ <BackgroundOption v-if="backgroundAt" :background_style="styleSheet.background_style" />
5	5	</template>
6	6	<script>
7	7	import BackgroundOption from "./BackgroundOption.vue";
...	...	@@ -22,12 +22,23 @@
22	22	backgroundAt: false,
23	23	};
24	24	},
	25	+ created() {
	26	+ this.init();
	27	+ },
25	28	watch: {
26		- styleSheet: function (v) {
27		- this.cellAt = v.borderStyle != null;
28		- this.backgroundAt = v.background_style != null;
	29	+ styleSheet: {
	30	+ handler(v) {
	31	+ this.init();
	32	+ },
	33	+ deep: true
29	34	},
30	35	},
	36	+ methods: {
	37	+ init() {
	38	+ this.cellAt = this.styleSheet.borderStyle != null;
	39	+ this.backgroundAt = this.styleSheet.background_style != null;
	40	+ }
	41	+ },
31	42	components: {
32	43	BackgroundOption: BackgroundOption,
33	44	CellOption: CellOption,

...	...	@@ -7,18 +7,22 @@
7	7	</template>
8	8	<template v-else>
9	9	<svg-icon type="mdi" :width="18" :height="18" :path="dotPath" />
10		- <svg-icon type="mdi" :width="18" :height="18" :path="layoutPath" :color="'#fbbe28'" />
	10	+ <template v-if="splitInfo.se == 'splitter'">
	11	+ <svg-icon type="mdi" v-if="splitInfo.useSj" :width="18" :height="18" :path="titlePath" :color="'#fbbe28'" />
	12	+ <svg-icon type="mdi" v-else :width="18" :height="18" :path="layoutPath" :color="'#fbbe28'" />
	13	+ </template>
	14	+ <svg-icon type="mdi" v-if="splitInfo.se == 'component'" :width="18" :height="18" :path="filePath" :color="'#fbbe28'" />
11	15	</template>
12	16	<p class="node-text">{{ splitInfo.layout_nm }}</p>
13	17	</div>
14		- <ul v-if="splitInfo.children.length > 0" class="children-node" :style="{ height: toggleSelect ? 'auto' : '0' }">
	18	+ <ul v-if="splitInfo.children.length > 0" class="children-node">
15	19	<TreeItem v-for="(node, indx) in splitInfo.children" :splitInfo="node" :selectLayout='selectLayout' :key="indx" @onChange="onChange" />
16	20	</ul>
17	21	</li>
18	22	</template>
19	23	<script>
20	24	import SvgIcon from '@jamescoyle/vue-icon';
21		-import { mdiLandPlots, mdiChevronRight, mdiRhombusSplit, mdiCircleSmall, mdiCropSquare } from '@mdi/js';
	25	+import { mdiLandPlots, mdiChevronRight, mdiRhombusSplit, mdiCircleSmall, mdiCropSquare, mdiFormatTitle } from '@mdi/js';
22	26	export default {
23	27	components: {
24	28	'SvgIcon': SvgIcon
...	...	@@ -33,16 +37,14 @@
33	37	},
34	38	data() {
35	39	return {
36		- currentSelectLayout: this.selectLayout,
37		- toggleSelect: false,
38		- clidrunNode: false,
39	40	folderPath: mdiLandPlots,
40	41	layoutPath: mdiCropSquare,
41	42	arrowPath: mdiChevronRight,
42	43	filePath: mdiRhombusSplit,
43		- selectedId: null,
44		- parentSelectNode: null,
45	44	dotPath: mdiCircleSmall,
	45	+ titlePath: mdiFormatTitle,
	46	+
	47	+ currentSelectLayout: this.selectLayout,
46	48	}
47	49	},
48	50	watch: {
...	...	@@ -55,7 +57,6 @@
55	57	},
56	58	methods: {
57	59	clickLayout(splitInfo) {
58		- this.toggleSelect = !this.toggleSelect;
59	60	this.$emit('onChange', splitInfo);
60	61	},
61	62
...	...	@@ -72,8 +73,6 @@
72	73
73	74	.children-node {
74	75	padding: 0 0 0 10px;
75		- overflow: hidden;
76		- transition: max-height 0.5s ease-in-out;
77	76	}
78	77
79	78	.node-text {

...	...	@@ -103,25 +103,25 @@
103	103	<div class="tabnav3">
104	104	<ul class="flex justify-start align-center">
105	105	<template v-for="(item, idx) of optionList" :key="idx">
106		- <li class="cursor" v-if="item.useAt" @click="fnChangeTab('opt', item.id)">
	106	+ <li class="cursor" v-show="item.useAt" @click="fnChangeTab('opt', item.id)">
107	107	<p :class="{ activeOption: activeOption === item.id }">{{ item.name }}</p>
108	108	</li>
109	109	</template>
110	110	</ul>
111	111	</div>
112		- <div v-if="activeOption == 'LAYOUT'">
	112	+ <div v-if="activeOption === 'LAYOUT'">
113	113	<StyleSheet :styleSheet="currentLayout.styleSheet" />
114	114	</div>
115		- <div v-if="activeOption == 'TITLE'">
	115	+ <div v-if="activeOption === 'TITLE'">
116	116	<div class="table-zone">
117	117	<p class="object-title mb5">타이틀 사용 여부</p>
118	118	<div class="input-container flex">
119	119	<label class="radio-label">
120		- <input type="radio" name="titleUseAt" class="custom-radiobox" :value="true" v-model="currentLayout.useSj">
	120	+ <input type="radio" name="titleUseAt" class="custom-radiobox" :value="true" v-model="isUseSj" @change="fnChangeUseSj">
121	121	<span>사용</span>
122	122	</label>
123	123	<label class="radio-label">
124		- <input type="radio" name="titleUseAt" class="custom-radiobox" :value="false" v-model="currentLayout.useSj">
	124	+ <input type="radio" name="titleUseAt" class="custom-radiobox" :value="false" v-model="isUseSj" @change="fnChangeUseSj">
125	125	<span>미사용</span>
126	126	</label>
127	127	</div>
...	...	@@ -139,7 +139,7 @@
139	139	</div>
140	140	</div>
141	141	</div>
142		- <div v-if="activeOption == 'COMPONENT'">
	142	+ <div v-if="activeOption === 'COMPONENT'">
143	143	<StyleSheet :styleSheet="currentLayout.styleSheet" />
144	144	</div>
145	145	</div>
...	...	@@ -166,8 +166,8 @@
166	166	<span>{{ item.group_nm }}</span>
167	167	</p>
168	168	<div>
169		- <button class="blue-border-btn set-btn" @click.stop="" @click="fnModalOpen(item, idx)"> 설정 </button>
170		- <button class="red-border-btn set-btn" @click.stop="" @click="deleteDiagram(item)"> 삭제 </button>
	169	+ <button class="blue-border-btn set-btn" @click.stop="" @click="fnModalOpen(item, idx)">설정</button>
	170	+ <button class="red-border-btn set-btn" @click.stop="" @click="deleteDiagram(item)">삭제</button>
171	171	</div>
172	172	</div>
173	173	</div>
...	...	@@ -495,6 +495,7 @@
495	495	isModalOpen: false,
496	496	isTabZoneOpen: false,
497	497	isAttributeOpen: false,
	498	+ isUseSj: false,
498	499
499	500	activeTab: "pageInfo",
500	501	activeOption: "LAYOUT",
...	...	@@ -534,18 +535,24 @@
534	535
535	536	computed: {},
536	537
537		- watch: {},
	538	+ watch: {
	539	+ // 컴포넌트 사용 여부
	540	+ 'currentLayout.component'(newVal, oldVal) {
	541	+ if (!this.$isEmpty(newVal)) {
	542	+ this.currentLayout.se = 'component'
	543	+ }
	544	+ },
	545	+ },
538	546
539	547	methods: {
540	548	// 초기화
541	549	async init() {
542		- // 탭, 옵션 초기화
543		- this.$activeTab = "pageInfo";
544		- this.activeOption = "LAYOUT";
545	550	this.activeIndex = null;
546	551
547	552	// 페이지 정보 초기화
548		- this.initPageInfo();
	553	+ this.customTitle = null;
	554	+ this.customComment = null;
	555	+ this.public_at = true;
549	556
550	557	// 레이아웃 초기화
551	558	let splitInfo = _.cloneDeep(this.$getDefaultJobGroup().customSplitter);
...	...	@@ -556,62 +563,10 @@
556	563	splitInfo.styleSheet.borderStyle = Object.assign({}, this.$getDefaultJobGroup().borderStyle);
557	564	splitInfo.styleSheet.background_style = Object.assign({}, this.$getDefaultJobGroup().background_style);
558	565	this.splitInfo = splitInfo;
	566	+ this.fnSelectLayout(splitInfo); // 레이아웃 선택
559	567
560	568	// 데이터 초기화
561	569	this.jobGroupList = [];
562		-
563		- this.initCurrent(this.splitInfo); // 현재 작업 객체 초기화
564		- },
565		-
566		- // 페이지 정보 초기화
567		- initPageInfo() {
568		- this.customTitle = null;
569		- this.customComment = null;
570		- this.public_at = true;
571		- },
572		-
573		- // 현재 작업 객체 초기화
574		- initCurrent(layout) {
575		- this.currentLayout = layout;
576		-
577		- // 레이어에 컴포넌트를 생성한 경우
578		- let component = layout.component;
579		- if (component != null) {
580		- // 컴포넌트 선택
581		- this.activeIndex = null; // 초기화
582		- this.chartComponent.forEach((item, idx) => {
583		- if (item.id === component.component_itm.chart_knd) {
584		- this.activeIndex = idx;
585		- }
586		- });
587		-
588		- // 컬럼 정보 변경
589		- this.dataX = component.component_itm.categoryAxis;
590		- this.dataY = component.component_itm.valueAxis;
591		- this.currentCalc = component.component_itm.chart_cal;
592		-
593		- // 현재 잡그룹 변경
594		- if (component.jobInfo.length > 0) {
595		- this.currentJobGroupIdx = null;
596		- this.currentJobGroup = component.jobInfo[0];
597		-
598		- // 현재 데이터테이블 변경
599		- if (this.currentJobGroup.jobItms.length === 0) {
600		- this.currentDataTable = Object.assign({}, this.$getDefaultObject().dataTable);
601		- } else {
602		- const index = this.currentJobGroup.jobItms.length - 1;
603		- this.currentDataTable = this.currentJobGroup.jobItms[index].dataTable;
604		- }
605		-
606		- this.onChangeChartData(); // 차트 데이터 수정
607		-
608		- return;
609		- }
610		- }
611		-
612		- this.currentJobGroupIdx = null;
613		- this.currentJobGroup = Object.assign({}, this.$getDefaultObject().jobGroup);
614		- this.initColumnInfo(); // 현재 컬럼 정보 초기화
615	570	},
616	571
617	572	// 현재 컬럼 정보 초기화
...	...	@@ -659,7 +614,7 @@
659	614	// 레이아웃
660	615	let resSplitterInfo = response.data.resultData.splitterInfo;
661	616	vm.splitInfo = resSplitterInfo;
662		- vm.currentLayout = vm.splitInfo;
	617	+ this.fnSelectLayout(vm.splitInfo); // 레이아웃 선택
663	618
664	619	// 데이터 목록
665	620	let resjobGroupList = response.data.resultData.jobGroupList;
...	...	@@ -672,11 +627,12 @@
672	627	},
673	628
674	629	// 현재 탭 변경
675		- fnChangeTab(type, current) {
	630	+ fnChangeTab(type, value) {
	631	+ console.log("current: ", value)
676	632	if (type == "nav") {
677		- this.activeTab = current;
	633	+ this.activeTab = value;
678	634	} else if (type == "opt") {
679		- this.activeOption = current;
	635	+ this.activeOption = value;
680	636	}
681	637	},
682	638
...	...	@@ -695,6 +651,23 @@
695	651	// 레이아웃 및 컴포넌트 더보기 버튼 동작
696	652	fnAttributeToggle() {
697	653	this.isAttributeOpen = !this.isAttributeOpen;
	654	+ },
	655	+
	656	+ // 타이틀 사용 여부
	657	+ async fnChangeUseSj() {
	658	+ const isCheck = await this.$showConfirm("경고", "타이틀 사용 여부 변경 시 작업 중인 데이터가 삭제됩니다.<br>타이틀을 사용 여부를 변경 하시겠습니까?");
	659	+ if (isCheck) {
	660	+ this.currentLayout.useSj = this.isUseSj;
	661	+ this.currentLayout.se = 'splitter';
	662	+
	663	+ if (this.currentLayout.useSj) {
	664	+ this.currentLayout.component = null; // 컴포넌트 초기화
	665	+ } else {
	666	+ this.currentLayout.layoutSj = _.cloneDeep(this.$getDefaultObject().layoutSj); // 타이틀 초기화
	667	+ }
	668	+ } else {
	669	+ this.isUseSj = this.currentLayout.useSj;
	670	+ }
698	671	},
699	672
700	673	// 유효성 검사 - 컴포넌트 추가
...	...	@@ -757,15 +730,56 @@
757	730	fnSelectLayout(layout) {
758	731	console.log("layout: ", layout);
759	732
	733	+ // 현재 레이아웃 변경
760	734	this.currentLayout = layout;
761	735
	736	+ // 현재 레이아웃에 따른 레이아웃 탭 옵션
762	737	this.optionList = [
763	738	{ id: "LAYOUT", name: "레이아웃", useAt: true },
764	739	{ id: "TITLE", name: "타이틀", useAt: layout.children.length == 0 },
765	740	{ id: "COMPONENT", name: "컴포넌트", useAt: !this.$isEmpty(layout.component) },
766	741	];
	742	+ this.fnChangeTab("opt", "LAYOUT"); // 탭 변경
767	743
768		- this.initCurrent(layout); // 현재 작업 객체 초기화
	744	+ // 현재 레이아웃에 컴포넌트가 있는 경우
	745	+ this.activeIndex = null; // 초기화
	746	+
	747	+ let component = layout.component;
	748	+ if (component != null) {
	749	+ for (let i = 0; i < this.chartComponent.length; i++) {
	750	+ let item = this.chartComponent;
	751	+ if (item.id === component.component_itm.chart_knd) {
	752	+ this.activeIndex = i;
	753	+ break;
	754	+ }
	755	+ }
	756	+
	757	+ // 컬럼 정보 변경
	758	+ this.dataX = component.component_itm.categoryAxis;
	759	+ this.dataY = component.component_itm.valueAxis;
	760	+ this.currentCalc = component.component_itm.chart_cal;
	761	+
	762	+ // 현재 잡그룹 변경
	763	+ if (component.jobInfo.length > 0) {
	764	+ this.currentJobGroupIdx = null;
	765	+ this.currentJobGroup = component.jobInfo[0];
	766	+
	767	+ // 현재 데이터테이블 변경
	768	+ if (this.currentJobGroup.jobItms.length === 0) {
	769	+ this.currentDataTable = Object.assign({}, this.$getDefaultObject().dataTable);
	770	+ } else {
	771	+ const index = this.currentJobGroup.jobItms.length - 1;
	772	+ this.currentDataTable = this.currentJobGroup.jobItms[index].dataTable;
	773	+ }
	774	+
	775	+ this.onChangeChartData(); // 차트 데이터 수정
	776	+ return;
	777	+ }
	778	+ }
	779	+
	780	+ this.currentJobGroupIdx = null;
	781	+ this.currentJobGroup = Object.assign({}, this.$getDefaultObject().jobGroup);
	782	+ this.initColumnInfo(); // 현재 컬럼 정보 초기화
769	783	},
770	784
771	785	findLoop(item) {
...	...	@@ -941,72 +955,51 @@
941	955	return;
942	956	}
943	957
944		- let parentLayout = this.findParentLayout(
945		- this.splitInfo,
946		- this.currentLayout.parents_splitter_id
947		- );
	958	+ let parentLayout = this.findParentLayout(this.splitInfo, this.currentLayout.parents_splitter_id);
948	959
949		- //선택한 레이아웃의 형제정보 찾기
950		- let otherIdx = parentLayout.children.findIndex(
951		- (item) => item.layout_nm !== this.currentLayout.layout_nm
952		- );
953		- let otherSplit = parentLayout.children[otherIdx];
954		- //otherSplit의 component, children 정보 가져오기
955		- let otherComponent = otherSplit.component;
956		- let otherChildren = otherSplit.children;
957		- let layoutSize1 = otherSplit.layout_size1;
958		- let layoutSize2 = otherSplit.layout_size2;
959		- let layoutType = otherSplit.layout_type;
960		- let se = otherSplit.se;
961		- let size = otherSplit.size;
962		- let styleSheet = otherSplit.styleSheet;
963		-
964		- // 부모 레이아웃에 다른 split의 정보 넣어 주기
965		- parentLayout.component = otherComponent;
966		- parentLayout.children = otherChildren;
967		- parentLayout.layout_size1 = layoutSize1;
968		- parentLayout.layout_size2 = layoutSize2;
969		- parentLayout.layout_type = layoutType;
970		- parentLayout.se = se;
971		- parentLayout.size = size;
972		- parentLayout.styleSheet = styleSheet;
973		-
974		- // 자식에게서 가져온 자식의 자식 정보의 부모 정보 변경
975	960	if (parentLayout.children.length > 0) {
976		- parentLayout.children.forEach((item) => {
977		- item.parents_splitter_id = parentLayout.layout_nm;
978		- });
	961	+ let copy = _.cloneDeep(parentLayout.children.filter((item) => item !== this.currentLayout));
	962	+ console.log("copy: ", copy);
	963	+
	964	+ if (copy.length == 1) {
	965	+ parentLayout.se = copy[0].se;
	966	+ parentLayout.type = copy[0].type;
	967	+ parentLayout.min_width = copy[0].min_width;
	968	+ parentLayout.min_height = copy[0].min_height;
	969	+ parentLayout.layout_size1 = copy[0].layout_size1;
	970	+ parentLayout.layout_size2 = copy[0].layout_size2;
	971	+ parentLayout.layout_type = copy[0].layout_type;
	972	+ parentLayout.styleSheet = copy[0].styleSheet;
	973	+ parentLayout.children = copy[0].children;
	974	+ parentLayout.component = copy[0].component;
	975	+ parentLayout.active = copy[0].active;
	976	+ parentLayout.layoutSj = copy[0].layoutSj;
	977	+ parentLayout.sizes = copy[0].sizes;
	978	+ parentLayout.useSj = copy[0].useSj;
	979	+
	980	+ return;
	981	+ }
979	982	}
	983	+
	984	+ parentLayout.children = parentLayout.children.filter((item) => item !== this.currentLayout);
980	985	},
981	986
982	987	// 부모 요소 검색
983		- findParentLayout(splitInfo, selectParentLayoutId) {
984		- // splitInfo가 배열인 경우 각 요소에 대해 재귀적으로 함수를 호출
985		- if (Array.isArray(splitInfo)) {
986		- for (let i = 0; i < splitInfo.length; i++) {
987		- let result = this.findParentLayout(
988		- splitInfo[i],
989		- selectParentLayoutId
990		- );
991		- if (result) return result; // 일치하는 부모 레이아웃을 찾으면 반환
992		- }
	988	+ findParentLayout(layout, parentId) {
	989	+ let result = null;
	990	+ if (layout.layout_nm === parentId) {
	991	+ result = layout;
993	992	} else {
994		- // 현재 splitInfo 객체의 layout_nm이 찾고자 하는 selectParentLayoutId와 일치하는지 확인
995		- if (splitInfo.layout_nm === selectParentLayoutId) {
996		- return splitInfo; // 일치하는 경우 현재 객체 반환
997		- }
998		-
999		- // 현재 객체의 자식들에 대해 재귀적으로 탐색
1000		- if (splitInfo.children && splitInfo.children.length > 0) {
1001		- return this.findParentLayout(
1002		- splitInfo.children,
1003		- selectParentLayoutId
1004		- );
	993	+ if (layout.children.length > 0) {
	994	+ for (let child of layout.children) {
	995	+ result = this.findParentLayout(child, parentId);
	996	+ if (result != null) {
	997	+ break;
	998	+ }
	999	+ }
1005	1000	}
1006	1001	}
1007		-
1008		- // 일치하는 요소를 찾지 못한 경우
1009		- return null;
	1002	+ return result;
1010	1003	},
1011	1004
1012	1005	// 취소 (데이터활용관리 목록으로 이동)
...	...	@@ -1039,17 +1032,18 @@
1039	1032	// 잡그룹 선택
1040	1033	async fnSelectJobGroup(jobGroup) {
1041	1034	let component = this.currentLayout.component;
1042		- if (component != null && jobGroup.jobItms.length > 0) {
1043		- let index = jobGroup.jobItms.length - 1;
1044		- if (component.component_itm.dataTable == jobGroup.jobItms[index].dataTable) {
1045		- return;
	1035	+ if (component != null) {
	1036	+ if (jobGroup.jobItms.length > 0) {
	1037	+ let index = jobGroup.jobItms.length - 1;
	1038	+ if (component.component_itm.dataTable == jobGroup.jobItms[index].dataTable) {
	1039	+ return;
	1040	+ }
1046	1041	}
1047		- }
1048		-
1049		- if (!this.$isEmpty(component.component_itm.data_list)) {
1050		- let isCheck = await this.$showConfirm("경고", "컴포넌트 컬럼 설정 후, 다른 데이터를 선택할 경우 기존 정보가 삭제됩니다.<br>다른 데이터를 선택하시겠습니까?");
1051		- if (!isCheck) {
1052		- return;
	1042	+ if (!this.$isEmpty(component.component_itm.data_list)) {
	1043	+ let isCheck = await this.$showConfirm("경고", "컴포넌트 컬럼 설정 후, 다른 데이터를 선택할 경우 기존 정보가 삭제됩니다.<br>다른 데이터를 선택하시겠습니까?");
	1044	+ if (!isCheck) {
	1045	+ return;
	1046	+ }
1053	1047	}
1054	1048	}
1055	1049
...	...	@@ -1083,6 +1077,12 @@
1083	1077
1084	1078	// 드랍 이벤트
1085	1079	async onDrop(type) {
	1080	+ // 레이아웃인 경우 경고 후 실행 취소
	1081	+ if (this.currentLayout.children.length > 0) {
	1082	+ this.$showAlert("경고", "레이아웃은 설정할 수 없습니다.");
	1083	+ return;
	1084	+ }
	1085	+
1086	1086	// 컴포넌트가 설정되지 않은 경우 경고 후 실행 취소
1087	1087	if (this.$isEmpty(this.currentLayout.component)) {
1088	1088	this.$showAlert("경고", "컴포넌트 등록 후 설정할 수 있습니다.");

Delete comment