ONESplitter 컴포넌트을 설명합니다.

1. 좌우분리 → ex)공통코드 화면 처럼 좌우 스플리터 설명 - 하나의 화면에서 2개의 그리드가 있고, F3 저장하면, onSave 를 어떻게 할지, 그리고 Service에서 Iterator와while 부분이 어떻게 달라지는 지가 중요하겠네요.

2 상하 분리 → 해더, 디테일 구조 ( 나중에 설명 해드릴게요 ., 지금은 다국어 화면 개발 방법을 배우니까요.)

VUE

1-1) ONESplitter 컴포넌트를 사용하여, 하나의 화면에서 2개의 그리드를 좌우분리 합니다.

예제) CODE.vue

그리드를 분리하기 위해 v-slot=”before” 와 v-slot=”after” 로 반드시 둘로 나누어 줍니다.

    <ONEMainCard :headerHeight="this.conditionHeight">
      <ONESplitter v-model="splitterModel" :limits="[23, 76]" @resize="onResize">
        <template **v-slot:before**>
          <ONEGrid
            ref="myGrid"
            ... 
            />
        </template>
        <template **v-slot:after**>
          <ONEGrid
            ref="myGrid2"
            .../>
       </template>
     </ONESplitter>
    </ONEMainCard>

 // splitterModel 변수는 두 공간을 어느정도로 나눌지의 숫자 값
 data () {
    return {
      splitterModel: 35
    }
 }

1-2) mounted

1. myGrid, myGrid2 를 grid, grid2 변수에 담습니다.
2. 셀에디트비긴 1, 2 와 셀에디트엔드1, 2 를 바인드합니다. (grid, grid2 각각 2개씩)
3. 공통코드 화면의 구조는 grid 그리드를 더블클릭하면, grid2 (상세)데이터가 조회, 저장할 수 있도록.. fn_cellDoubleClick 를 작성합니다.

mounted () {
    // 컴포넌트, 템플릿, 렌더링된 돔에 접근할 수 있다
    this.grid = this.$refs.myGrid
    this.grid2 = this.$refs.myGrid2
    // 그리드 생성 Object 삭제시
    this.grid.addObj = () => {
      return { useYn: 'Y', editableYn: 'N' }
    }
    this.grid2.addObj = () => {
      if (this.$isNull(this.grid.getCurrentRowId())) {
        this.$notify('B014', 'E') // 상세코드를 등록할 공통코드를 선택해주세요.
        return false
      }

      const items = this.grid.getCurrentRowItems()
      if (items.length < 1) {
        return { useYn: 'Y' }
      }
      return { mainCd: items.mainCd, useYn: 'Y' }
    }
    // 그리드 이벤트 바인드
    this.**grid**.bind('cellEditBegin', this.**fn_cellEditBegin**)
    this.**grid**.bind('cellEditEnd', this.**fn_cellEditEnd**)
    this.**grid**.bind('cellDoubleClick', this.**fn_cellDoubleClick**) // 더블클릭 이벤트가 있네요. 더블클릭을 하면, 우측 grid2를 조회시키는 함수도 필요하겠어요.
 
    this.**grid2**.bind('cellEditBegin', this.**fn_cellEditBegin2**)
    this.**grid2**.bind('cellEditEnd', this.**fn_cellEditEnd2**)
  },

1-3) fn_cellDoubleClick

    fn_cellDoubleClick (event) {
      this.dsArry = []
      this.dsArry.push(event.item.udf1)
      this.dsArry.push(event.item.udf2)
      this.dsArry.push(event.item.udf3)
      this.dsArry.push(event.item.udf4)
      this.dsArry.push(event.item.udf5)

      for (let i = 0; i < this.dsArry.length; i++) {
        if (!this.$isNull(this.dsArry[i])) {
          this.grid2.setColumnPropByDataField('udf' + (i + 1), { headerText: this.dsArry[i] })
        } else {
          this.grid2.setColumnPropByDataField('udf' + (i + 1), { headerText: this.$getMlt('T_UDF' + (i + 1)) })
        }
      }
      this.grid.selectRowStyle(event.item.serialkey)
      this.detSearch(event.item.mainCd)
      if (this.delFlag === 'D') {
        this.onSearch()
        this.delFlag = '' // delFlag 꼭 초기화
      }
    },