u

code/container-ocr/ocr-vue/src/components/g3-detail/index.js

@@ -0,0 +1,24 @@
+import G3Detail from "./index.vue";
+
+export function showDetailDrawer(props) {
+  // 1. 创建容器
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+
+  // 2. 创建 app
+  const app = createApp({
+    render() {
+      return h(G3Detail, {
+        ...props,
+        // 关闭时销毁
+        onClose: () => {
+          app.unmount();
+          container.remove();
+        },
+      });
+    },
+  });
+
+  // 3. 挂载
+  app.mount(container);
+}

code/container-ocr/ocr-vue/src/components/g3-detail/index.vue

@@ -0,0 +1,77 @@
+<script lang="js" setup>
+import { loadDetailColumnsApi, loadObjectApi } from "@/request/api";
+import { formatValueByFormat } from "@/utils/columns";
+const loading = ref(false);
+const visible = ref(true); 
+
+const props = defineProps({
+  viewName: String,
+  keyField: String,
+  keyValue: [String, Number],
+});
+
+const dataList = ref([]);
+
+async function initData() {
+  console.log(props);
+
+  if (!props.viewName) return;
+
+  loading.value = true;
+
+  try {
+    const columnsRes = await loadDetailColumnsApi(props.viewName);
+
+    if (!columnsRes?.success) return;
+
+    dataList.value = columnsRes.data || [];
+
+    if (props.keyField && props.keyValue) {
+      const objRes = await loadObjectApi({
+        viewName: props.viewName,
+        keyField: props.keyField,
+        keyValue: props.keyValue,
+      });
+
+      if (objRes?.success) {
+        const rowData = objRes.data || {};
+
+        dataList.value.forEach((item) => {
+          item.col_Value = rowData[item.col_FieldName] ?? "";
+        });
+      }
+    }
+  } catch (e) {
+    console.error("initData error:", e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function displayValue(item) {
+  if (item.col_Value == null) return "";
+  return formatValueByFormat(item.col_Value, item.col_DisplayFormat);
+}
+</script>
+
+<template>
+  <el-drawer v-model="visible" title="详细信息" @opened="initData">
+    <template #default>
+      <G3Grid v-if="dataList.length > 0">
+        <G3GridGroup>
+          <G3GridItem
+            v-for="item in dataList"
+            :key="item.col_FieldName"
+            :label="item.col_Caption"
+            :height="28"
+            :label-width="100"
+          >
+            {{ displayValue(item) }}
+          </G3GridItem>
+        </G3GridGroup>
+      </G3Grid>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="scss" scoped></style>

code/container-ocr/ocr-vue/src/components/g3-grid/g3-grid-group.vue

@@ -14,6 +14,11 @@ const props = defineProps({
   labelWidth: {
     type: [String, Number],
   },
+  labelAlign: {
+    type: String,
+    default: "right",
+    validator: (v) => ["left", "center", "right"].includes(v),
+  },
 });
 
 const gridStyle = computed(() => ({
@@ -30,7 +35,11 @@ provide("G3GridGroupConfig", toRefs(props));
 </script>
 
 <template>
-  <div class="g3-grid-group" :class="{ border: props.border }" :style="gridStyle">
+  <div
+    class="g3-grid-group"
+    :class="{ border: props.border }"
+    :style="gridStyle"
+  >
     <slot></slot>
   </div>
 </template>

code/container-ocr/ocr-vue/src/components/g3-grid/g3-grid-item.vue

@@ -36,7 +36,8 @@ const props = defineProps({
 const parentConfig = inject("G3GridGroupConfig", {});
 
 const mergedBorder = computed(() => {
-  const val = props.border !== undefined ? props.border : parentConfig.border?.value;
+  const val =
+    props.border !== undefined ? props.border : parentConfig.border?.value;
 
   return val;
 });
@@ -47,7 +48,8 @@ const gridItemStyle = computed(() => {
   };
 
   if (props.height !== undefined && props.height !== null) {
-    style.height = typeof props.height === "number" ? props.height + "px" : props.height;
+    style.height =
+      typeof props.height === "number" ? props.height + "px" : props.height;
   }
 
   return style;
@@ -55,8 +57,15 @@ const gridItemStyle = computed(() => {
 
 const gridLabelStyle = computed(() => {
   const val = props.labelWidth ?? parentConfig.labelWidth?.value;
-  const alignVal = props.labelAlign ?? parentConfig.labelAlign?.value ?? "right";
 
+  return {
+    flex: `0 0 ${typeof val === "number" ? val + "px" : val}`,
+  };
+});
+
+const gridInnerLabelStyle = computed(() => {
+  const alignVal =
+    props.labelAlign ?? parentConfig.labelAlign?.value ?? "right";
   const justifyMap = {
     left: "flex-start",
     center: "center",
@@ -64,33 +73,32 @@ const gridLabelStyle = computed(() => {
   };
 
   return {
-    flex: `0 0 ${typeof val === "number" ? val + "px" : val}`,
     display: "flex",
     alignItems: "center",
     justifyContent: justifyMap[alignVal],
   };
 });
-
-const requiredStyle = computed(() => {
-  const alignVal = props.labelAlign ?? parentConfig.labelAlign?.value ?? "right";
-
-  return alignVal === "right" ? { flexDirection: "row-reverse" } : {};
-});
 </script>
 
 <template>
-  <div class="g3-grid-item" :class="{ border: mergedBorder }" :style="gridItemStyle">
+  <div
+    class="g3-grid-item"
+    :class="{ border: mergedBorder }"
+    :style="gridItemStyle"
+  >
     <!-- label -->
     <div
       class="label"
-      :class="{ required, 'is-slot': $slots.label }"
-      :style="[gridLabelStyle, requiredStyle]"
+      :class="{ 'is-slot': $slots.label }"
+      :style="[gridLabelStyle]"
     >
-      <span class="label-inner">
-        <slot name="label">
+      <span v-if="required" class="required-star">*</span>
+
+      <slot name="label">
+        <span class="label-inner" :style="[gridInnerLabelStyle]">
           {{ label }}
-        </slot>
-      </span>
+        </span>
+      </slot>
     </div>
 
     <!-- content -->
@@ -120,12 +128,12 @@ const requiredStyle = computed(() => {
     display: flex;
     position: relative;
     min-width: 0;
+    width: 100%;
 
-    &.required::before {
-      content: "*";
+    .required-star {
       color: #f56c6c;
-      margin-right: 4px;
-      font-weight: bold;
+      margin-left: 4px;
+      flex-shrink: 0; // 防止被压缩
     }
 
     &.is-slot .label-inner {
@@ -139,6 +147,8 @@ const requiredStyle = computed(() => {
       min-width: 0;
       flex: 1;
       padding: 0px 4px;
+      display: flex;
+      align-items: center;
     }
   }
 
@@ -175,7 +185,7 @@ const requiredStyle = computed(() => {
 
   :deep(.el-select) {
     width: 100% !important;
-    height: 100% !important;
+    height: var(--el-component-size) !important;
     .el-select__wrapper {
       width: 100% !important;
       height: 100% !important;

code/container-ocr/ocr-vue/src/components/g3-table/G3EditTable.vue

@@ -1,7 +0,0 @@
-<script lang="js" setup></script>
-
-<template>
-  <div class=""></div>
-</template>
-
-<style lang="scss" scoped></style>

code/container-ocr/ocr-vue/src/components/g3-table/G3RecursiveColumn.vue

@@ -1,17 +0,0 @@
-<script lang="js" setup>
-defineOptions({
-  name: "G3RecursiveColumn",
-});
-
-const isGroup = computed(() => {
-  return Array.isArray(props.column.children) && props.column.children.length > 0;
-});
-</script>
-
-<template>
-  <vxe-colgroup v-if="isGroup" :title="column.label" :field="column.field">
-    
-  </vxe-colgroup>
-</template>
-
-<style lang="scss" scoped></style>

code/container-ocr/ocr-vue/src/components/g3-table/g3-recursive-column.vue

@@ -0,0 +1,53 @@
+<script lang="js" setup>
+import { getAlignByFormat, formatValueByFormat } from "@/utils/columns";
+
+defineOptions({
+  name: "G3RecursiveColumn",
+});
+
+const props = defineProps({
+  column: {
+    type: Object,
+    required: true,
+  },
+});
+
+const isGroup = computed(() => {
+  return (
+    Array.isArray(props.column.children) && props.column.children.length > 0
+  );
+});
+</script>
+
+<template>
+  <vxe-colgroup v-if="isGroup" :title="column.label" :field="column.field">
+    <G3RecursiveColumn
+      v-for="(child, index) in column.children"
+      :key="index"
+      :column="child"
+    ></G3RecursiveColumn>
+  </vxe-colgroup>
+
+  <vxe-column
+    v-else
+    :field="column.col_FieldName"
+    :title="column.col_Caption"
+    :width="column.col_Width"
+    :align="getAlignByFormat(column.col_DisplayFormat)"
+    :params="column"
+    :sortable="props.sortable"
+  >
+    <template #default="{ row }">
+      {{
+        formatValueByFormat(row[column.col_FieldName], column.col_DisplayFormat)
+      }}
+    </template>
+    <template v-if="column.showSummary === '1'" #footer="{ row }">
+      {{
+        formatValueByFormat(row[column.col_FieldName], column.col_DisplayFormat)
+      }}
+    </template>
+  </vxe-column>
+</template>
+
+<style lang="scss" scoped></style>