hubez-admin partner-git master -> hubez-git transfer 202205241800

2025-12-07 06:24:47 +09:00 · 2022-05-24 18:12:19 +09:00
parent 013e992bc7
commit ad80b88089
309 changed files with 50355 additions and 91 deletions
--- a/frontend/src/components/TuiGridSample_it_will_be_delete.vue
+++ b/frontend/src/components/TuiGridSample_it_will_be_delete.vue
@@ -0,0 +1,116 @@
+`
+  샘플 문서, 추후 삭제 예정 입니다.
+`
+<template>
+  <grid ref="tuiGrid"
+    :data="gridProps.data"
+    :columns="gridProps.columns"
+    :options="gridProps.options"
+    @click="clicked"
+  />
+</template>
+
+<script>
+  import 'tui-grid/dist/tui-grid.css'
+  import { Grid } from '@toast-ui/vue-grid'
+
+  class inputTag {
+    constructor(props) {
+      const el = document.createElement('input');
+      el.type = "text";
+      el.style.width = "80%";
+      
+      this.el = el;
+      this.render(props);
+    }
+    getElement() {
+      return this.el;
+    }
+    render(props) {
+      this.el.value = "test";
+      //this.el.value = String(props.value.chatbotId);
+    }
+  }
+
+  class divTag {
+    constructor(props) {
+      const div = document.createElement("div");
+      // props >> 컬럼 데이터. 하위 데이터가 있다면 props.value.xxx로 접근 가능하다.
+      div.appendChild(document.createElement("div")).textContent = "id: " + props.value.chatbotId
+      div.appendChild(document.createElement("div")).textContent = "snum: " + props.value.subNum
+
+      
+      
+      this.el = div;
+    }
+    getElement() {
+      return this.el;
+    }
+  }
+
+  export default {
+    components: {
+      'grid': Grid
+    },
+    data() {
+      return {
+        gridProps: null
+      }
+    },
+    created() {
+      this.gridProps = {
+        data: {
+          api: {
+            readData: { url: '/api/test/test', method: 'GET' },
+          }
+        },
+        pageOptions: {
+          perPage: 5
+        },
+        options: {
+          header: {
+            height: 100,
+            // 헤더 merge
+            complexColumns: [
+              { header: "브랜드 모음", name: 'mergeColumn1', childNames: ["corpId", "mergeBrand", "mergeInfo"] },
+              { header: "브랜드", name: 'mergeBrand', childNames: ["brId", "brNm"] },
+              { header: "정보", name: 'mergeInfo', childNames: ["useYn", "apprYn", "apprReqYmd", "apprYmd"] }
+            ]
+          }
+        },
+        // 헤더
+        columns: [
+          { name: "corpId", header: "회사 아이디", align: "center" },
+          { name: "brId", header: "브랜드 아이디", align: "center" },
+          { name: "brNm", header: "브랜드 명", align: "center", sortable: true },
+          { name: "useYn", header: "사용 여부", align: "center" },
+          { name: "apprYn", header: "승인 여부", align: "center" },
+          { name: "apprReqYmd", header: "승인요청 날짜", align: "center", sortable: true },
+          { name: "apprYmd", header: "승인 날짜", align: "center", sortable: true },
+          { name: "noname", header: "커스텀 1", align: "center", renderer: {
+            type: inputTag  // 별도의 컬럼 구성이 필요한 경우
+          }},
+          { name: "chatbot", header: "커스텀 2", align: "center", renderer: {
+            type: divTag  // 별도의 컬럼 구성이 필요한 경우
+          }}
+        ]
+      }
+    },
+    mounted() {
+      this.linkTo();
+    },
+    methods: {
+      linkTo: function() {
+        this.$refs.tuiGrid.invoke("addCellClassName", "0", "corpId", "cell-red");
+      },
+      clicked: function(v) {
+        var data = this.$refs.tuiGrid.invoke("getRow", v.rowKey);
+        alert("브랜드 아이디(" + data.brId + ") 클릭");
+      }
+    }
+  }
+</script>
+
+<style>
+.tui-grid-cell.cell-red {background-color: red}
+</style>