hsdt · duynndu · Apr 15, 2026 · Apr 14, 2026
diff --git a/projects/template-editor/src/components/preview/Preview.vue b/projects/template-editor/src/components/preview/Preview.vue
@@ -117,6 +117,7 @@ import SimpleContextMenu from '../ContextMenu.vue';
 import { installContextMenuDirective } from '../../directives/context-menu';
 import IcdGroupItem from '../forms/IcdGroupItem.vue';
 import IcdList from '../forms/IcdList.vue';
+import XmlViewer from './XmlViewer.vue';
 
 export default {
   name: 'Preview',
@@ -237,6 +238,7 @@ export default {
           .component('Checkbox', Checkbox)
           .component('DatePicker', DatePicker)
           .component('Paint', Paint)
+          .component('XmlViewer', XmlViewer)
           .component('ContextMenu', SimpleContextMenu)
           .component('ImContextMenu', ImContextMenu)
           .component('ImContextMenuItem', ImContextMenuItem)

diff --git a/projects/template-editor/src/components/preview/PreviewWrapper.vue b/projects/template-editor/src/components/preview/PreviewWrapper.vue
@@ -93,6 +93,9 @@ export default {
         <Checkbox
           size="md" v-model="hsBenhAn.NguyenNhanTuVong" value="DO_BENH" />
       </PageA4>
+      <PageA4 style="padding:5mm">
+        <XmlViewer url="http://localhost:5000/Content/Upload/2026/04/13/BA26000003_du_lieu.xml" />
+      </PageA4>
       `,
       context: {
         moment: moment,

diff --git a/projects/template-editor/src/components/preview/TreeView.vue b/projects/template-editor/src/components/preview/TreeView.vue
@@ -0,0 +1,142 @@
+<template>
+  <ul class="tree-view">
+    <template v-for="(value, key) in data">
+      <li v-if="key === '#text'" :key="key + '-text'">
+        <span
+          v-if="typeof value === 'string' && value.length > 80"
+          class="tree-value-block"
+          >{{ value }}</span
+        >
+        <span v-else class="tree-value">{{ value }}</span>
+      </li>
+      <template v-else-if="Array.isArray(value)">
+        <li v-for="(item, idx) in value" :key="key + '-' + idx">
+          <span @click="toggle(key + '-' + idx)" class="tree-key">
+            <span class="arrow" :class="{ open: isOpen(key + '-' + idx) }"
+              >▶</span
+            >
+            &lt;{{ key }}&gt;
+          </span>
+          <template v-if="isOpen(key + '-' + idx)">
+            <TreeView :data="item" />
+            <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
+          </template>
+          <template v-else>
+            <div class="tree-collapsed">
+              ...<br />
+              <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
+            </div>
+          </template>
+        </li>
+      </template>
+      <li v-else-if="isObject(value)" :key="key + '-obj'">
+        <template v-if="Object.keys(value).length === 0">
+          <span class="tree-key">&lt;{{ key }}/&gt;</span>
+        </template>
+        <template v-else-if="Object.keys(value).length === 1 && value['#text']">
+          <span class="tree-key">&lt;{{ key }}&gt;</span>
+          <span class="tree-value">{{ value['#text'] }}</span>
+          <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
+        </template>
+        <template v-else>
+          <span @click="toggle(key)" class="tree-key">
+            <span class="arrow" :class="{ open: isOpen(key) }">▶</span>
+            &lt;{{ key }}&gt;
+          </span>
+          <template v-if="isOpen(key)">
+            <TreeView :data="value" />
+            <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
+          </template>
+          <template v-else>
+            <div class="tree-collapsed">
+              ...<br />
+              <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
+            </div>
+          </template>
+        </template>
+      </li>
+      <li v-else :key="key + '-val'">
+        <span class="tree-key">&lt;{{ key }}&gt;:</span>
+        <span
+          v-if="typeof value === 'string' && value.length > 80"
+          class="tree-value-block"
+          >{{ value }}</span
+        >
+        <span v-else class="tree-value">{{ value }}</span>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "TreeView",
+  props: {
+    data: { type: [Object, Array], required: true },
+  },
+  setup(props) {
+    const openKeys = ref<Record<string, boolean>>({});
+    const isObject = (val: any) =>
+      val && typeof val === "object" && !Array.isArray(val);
+    const isOpen = (key: string | number) => openKeys.value[String(key)];
+    const toggle = (key: string | number) => {
+      const k = String(key);
+      openKeys.value[k] = !openKeys.value[k];
+    };
+    return { isObject, isOpen, toggle };
+  },
+});
+</script>
+
+<style scoped>
+.tree-view {
+  list-style: none;
+  padding-left: 18px;
+  font-family: "Fira Mono", "Consolas", "Menlo", "Monaco", monospace;
+  font-size: 16px;
+}
+.tree-key {
+  cursor: pointer;
+  color: #8e24aa;
+  user-select: none;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+.tree-value {
+  color: #333;
+}
+.arrow {
+  display: inline-block;
+  width: 1em;
+  color: #888;
+  transition:
+    transform 0.2s,
+    color 0.2s;
+  vertical-align: middle;
+  margin-right: 2px;
+  font-size: 1em;
+}
+.arrow.open {
+  transform: rotate(90deg);
+  color: #8e24aa;
+}
+.tree-key {
+  display: inline-flex;
+  align-items: center;
+}
+.tree-value-block {
+  display: block;
+  background: #f8f8f8;
+  color: #444;
+  border-radius: 4px;
+  padding: 8px;
+  margin: 4px 0 4px 16px;
+  font-family: inherit;
+  font-size: 15px;
+  white-space: pre-wrap;
+  overflow-x: auto;
+  max-width: 100%;
+}
+</style>
diff --git a/projects/template-editor/src/components/preview/XmlViewer.vue b/projects/template-editor/src/components/preview/XmlViewer.vue
@@ -0,0 +1,115 @@
+<template>
+  <div v-if="loading">Đang tải...</div>
+  <div v-else class="xml-viewer-container">
+    <TreeView v-if="parsedObject" :data="parsedObject" />
+  </div>
+</template>
+
+<style scoped>
+.xml-viewer-container {
+  overflow-y: auto;
+  max-height: 100%;
+  border-radius: 6px;
+  font-size: 15px;
+  height: 100%;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  width: 100%;
+  max-width: 100%;
+}
+</style>
+
+
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue';
+import TreeView from './TreeView.vue';
+
+export default defineComponent({
+  name: 'XmlViewer',
+  components: { TreeView },
+  props: {
+    url: { type: String, required: true }
+  },
+  setup(props) {
+    const xmlContent = ref('');
+    const parsedObject = ref<any>(null);
+    const loading = ref(true);
+    const error = ref('');
+
+
+
+    function domToObj(node: Node): any {
+      // Nếu là text node
+      if (node.nodeType === 3) {
+        const text = node.nodeValue?.trim();
+        return text ? text : undefined;
+      }
+      // Nếu là element node
+      if (node.nodeType === 1) {
+        const obj: any = {};
+        const el = node as Element;
+        // Thuộc tính
+        if (el.attributes && el.attributes.length > 0) {
+          obj['@attributes'] = {};
+          for (let attr of Array.from(el.attributes)) {
+            obj['@attributes'][attr.name] = attr.value;
+          }
+        }
+        // Child nodes
+        for (let child of Array.from(node.childNodes)) {
+          const childObj = domToObj(child);
+          if (childObj === undefined) continue;
+          if (child.nodeType === 3) {
+            // text node
+            if (!obj['#text']) obj['#text'] = '';
+            obj['#text'] += childObj;
+          } else if (child.nodeType === 1) {
+            // element node
+            const childEl = child as Element;
+            const tag = childEl.tagName;
+            if (!obj[tag]) obj[tag] = [];
+            obj[tag].push(childObj);
+          }
+        }
+        // Nếu chỉ có 1 phần tử trong mảng thì trả về object thay vì array
+        for (let key in obj) {
+          if (Array.isArray(obj[key]) && obj[key].length === 1) {
+            obj[key] = obj[key][0];
+          }
+        }
+        return obj;
+      }
+      return undefined;
+    }
+
+    const fetchXml = async () => {
+      loading.value = true;
+      error.value = '';
+      try {
+        const res = await fetch(props.url, {
+          headers: {
+            'Content-Type': 'text/xml'
+          }
+        });
+        if (!res.ok) throw new Error('Không thể tải XML');
+        xmlContent.value = await res.text();
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(xmlContent.value, 'text/xml');
+        // Lấy node gốc
+        const root = xmlDoc.documentElement;
+        parsedObject.value = { [root.tagName]: domToObj(root) };
+      } catch (e: any) {
+        error.value = e.message || 'Lỗi không xác định';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    onMounted(fetchXml);
+
+
+    return { xmlContent, parsedObject, loading, error };
+  }
+});
+</script>