From a952dfdddef68beddbecae5761fdf9c8b367d856 Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Sat, 27 Dec 2025 03:03:10 +0800
Subject: [PATCH] fix: update list-table prop definition

---
 packages/base/data/list-table.vue | 305 +++++++++++++++---------------
 plugs/composables/useListTable.ts |   9 +-
 2 files changed, 158 insertions(+), 156 deletions(-)

diff --git a/packages/base/data/list-table.vue b/packages/base/data/list-table.vue
index 3b7e64d..9f451a7 100644
--- a/packages/base/data/list-table.vue
+++ b/packages/base/data/list-table.vue
@@ -1,212 +1,209 @@
 <template>
-    <div class="my-table">
-        <el-table ref="table" :size="state.size.size" :data="page ? data.data : data" :border="border"
-            @selection-change="selectionChange" @row-click="emit('row-click', $event)"
-            :height="height || (page ? state.size.pTableHeight : state.size.tableHeight)" highlight-current-row
-            :row-key="rowKey" :tree-porps="treeProps" :lazy="lazy" :load="load">
-
-            <el-table-column v-for="item in props" :key="item.code" :prop="item.code" :label="item.name || t(item.i18n)"
-                :type="item.type" :min-width="item.width" :width="item.type ? item.width : ''" :fixed="item.fixed"
-                :align="item.align ? item.align : 'center'" show-overflow-tooltip
-                :formatter="(row: any, column: any, value: any) => formatter(row, column, value, item)">
-
-                <template v-if="item.slot" #default="scope">
-                    <slot :name="item.code" :row="scope.row"></slot>
-                </template>
-
-                <template v-if="item.dict" #default="{ row }">
-                    {{ formatterByDist(item.dict, row[item.code]) }}
-                </template>
-
-            </el-table-column>
-
-        </el-table>
-    </div>
-    <div v-if="page" class="my-pagination">
-        <el-pagination :small="state.size.size == 'small'" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange" :current-page="example.page" :page-sizes="[10, 20, 50, 100, 200]"
-            :page-size="example.size" layout="total, sizes, prev, pager, next, jumper" :total="data.total">
-        </el-pagination>
-    </div>
+  <div class="my-table">
+    <el-table
+      ref="table"
+      :size="state.size.size"
+      :data="page ? data.data : data"
+      :border="border"
+      @selection-change="selectionChange"
+      @row-click="emit('row-click', $event)"
+      :height="height || (page ? state.size.pTableHeight : state.size.tableHeight)"
+      highlight-current-row
+      :row-key="rowKey"
+      :tree-porps="treeProps"
+      :lazy="lazy"
+      :load="load"
+    >
+      <el-table-column
+        v-for="item in props"
+        :key="item.code"
+        :prop="item.code"
+        :label="item.name || t(item.i18n)"
+        :type="item.type"
+        :min-width="item.width"
+        :width="item.type ? item.width : ''"
+        :fixed="item.fixed"
+        :align="item.align ? item.align : 'center'"
+        show-overflow-tooltip
+        :formatter="(row: any, column: any, value: any) => formatter(row, column, value, item)"
+      >
+        <template v-if="item.slot" #default="scope">
+          <slot :name="item.code" :row="scope.row"></slot>
+        </template>
+
+        <template v-if="item.dict" #default="{ row }">
+          {{ formatterByDist(item.dict, row[item.code]) }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <div v-if="page" class="my-pagination">
+    <el-pagination
+      :small="state.size.size == 'small'"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="example.page"
+      :page-sizes="[10, 20, 50, 100, 200]"
+      :page-size="example.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="data.total"
+    >
+    </el-pagination>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { useStore } from "vuex";
 import { reactive, onMounted, ref, watch, onUpdated } from "vue";
 import { useI18n } from "vue3-i18n";
+import { TableColumn } from "noob-mengyxu";
 // import { PageExample } from "noob-mengyxu";
 const { t } = useI18n();
 const { state } = useStore();
 const table = ref();
 
-const prop = defineProps({
-    data: {
-        type: Object,
-        default: null
-    },
-    props: {
-        type: Array<any>(),
-        default: [],
-    },
-    page: {
-        type: Boolean,
-        default: false,
-    },
-    height: {
-        type: Number,
-        default: null,
-    },
-    example: {
-        type: Object,
-        default: {},
-    },
-    rowKey: {
-        type: String,
-        default: null,
-    },
-    selectKey: {
-        type: String,
-        default: null,
-    },
-    treeProps: {
-        type: Object,
-        default: null,
-    },
-    lazy: {
-        type: Boolean,
-        default: false,
-    },
-    border: {
-        type: Boolean,
-        default: false,
-    },
+interface Props {
+  data?: any;
+  props?: TableColumn[];
+  page?: boolean;
+  height?: number;
+  example?: any;
+  rowKey?: string;
+  selectKey?: string;
+  treeProps?: any;
+  lazy?: boolean;
+  border?: boolean;
+}
+
+const prop = withDefaults(defineProps<Props>(), {
+  data: () => [],
+  props: () => [],
+  page: false,
+  height: undefined,
+  example: () => ({}),
+  rowKey: undefined,
+  selectKey: undefined,
+  treeProps: undefined,
+  lazy: false,
+  border: false,
 });
 
 const emit = defineEmits(["query", "selection-change", "row-click"]);
 
-const selectionChange = selection => {
-    emit("selection-change", selection);
+const selectionChange = (selection) => {
+  emit("selection-change", selection);
 };
 
 const handleSizeChange = (val) => {
-    prop.example.size = val;
-    emit("query");
+  prop.example.size = val;
+  emit("query");
 };
 
 const handleCurrentChange = (val) => {
-    prop.example.page = val;
-    emit("query");
+  prop.example.page = val;
+  emit("query");
 };
 
-const getValue = (
-    row: any,
-    column: string,
-    value: any,
-    index?: number
-) => {
-    if ((typeof value === 'undefined' || value === null || value === '') && value !== 0) {
-        return '--';
-    }
-    return value;
+const getValue = (row: any, column: string, value: any, index?: number) => {
+  if ((typeof value === "undefined" || value === null || value === "") && value !== 0) {
+    return "--";
+  }
+  return value;
 };
 
 const formatStamp = (value: any) => {
-    const date = new Date(value * 1000);
-    const month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
-    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
-    const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
-    const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
-    const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-    return date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
+  const date = new Date(value * 1000);
+  const month = date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
+  const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+  const hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+  const minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+  const second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+  return date.getFullYear() + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
 };
 const formatFileSize = (value: any) => {
-    const k = value / 1024;
-    if (k < 1) {
-        return value + "B";
-    }
-    const m = k / 1024;
-    if (m < 1) {
-        return k.toFixed(2) + "K";
-    }
-    const g = m / 1024;
-    if (g < 1) {
-        return m.toFixed(2) + "M";
-    }
-    return g.toFixed(2) + "G";
+  const k = value / 1024;
+  if (k < 1) {
+    return value + "B";
+  }
+  const m = k / 1024;
+  if (m < 1) {
+    return k.toFixed(2) + "K";
+  }
+  const g = m / 1024;
+  if (g < 1) {
+    return m.toFixed(2) + "M";
+  }
+  return g.toFixed(2) + "G";
 };
 
 const formatter = (row: any, column: any, value: any, item: any) => {
-    if (item.dict)
-        return formatterByDist(item.dict, value);
-    if (item.timestamp)
-        return formatStamp(value);
-    if (item.filesize)
-        return formatFileSize(value);
-    if (row.scheme)
-        return formatterByDist(row.scheme + '_' + column.property, value);
-    return getValue(null, '', value);
+  if (item.dict) return formatterByDist(item.dict, value);
+  if (item.timestamp) return formatStamp(value);
+  if (item.filesize) return formatFileSize(value);
+  if (row.scheme) return formatterByDist(row.scheme + "_" + column.property, value);
+  return getValue(null, "", value);
 };
 
 const formatterByDist = (dictKey, value) => {
-    if (!dictKey) {
-        return getValue(null, '', value);
-    }
-    const mapping = state.dict[dictKey];
-    if (mapping == null) {
-        return getValue(null, '', value);
-    }
-    return mapping[value] == null ? value : mapping[value];
+  if (!dictKey) {
+    return getValue(null, "", value);
+  }
+  const mapping = state.dict[dictKey];
+  if (mapping == null) {
+    return getValue(null, "", value);
+  }
+  return mapping[value] == null ? value : mapping[value];
 };
 
 const select = (n) => {
-    if (n.selectKey && table.value) {
-        n.data.forEach(e => {
-            table.value.toggleRowSelection(e, e[n.selectKey]);
-        })
-    }
-}
+  if (n.selectKey && table.value) {
+    n.data.forEach((e) => {
+      table.value.toggleRowSelection(e, e[n.selectKey]);
+    });
+  }
+};
 
 const load = (dict, node, resolve) => {
-    resolve(dict.child);
-}
+  resolve(dict.child);
+};
 
 watch(prop, select);
 
-onMounted(() => { });
+onMounted(() => {});
 onUpdated(() => {
-    select(prop)
-})
+  select(prop);
+});
 </script>
 <style lang="scss" scoped>
 .my-table * {
-    --el-table-bg-color: v-bind('state.style.tableBg') !important;
-    --el-table-tr-bg-color: v-bind('state.style.tableBg') !important;
-    --el-table-expanded-cell-bg-color: v-bind('state.style.tableBg') !important;
-
-    --el-table-border-color: v-bind('state.style.tableBorderColor');
-    --el-table-border: 1px solid var(--el-table-border-color);
-    --el-table-text-color: v-bind('state.style.tableColor');
-    --el-table-header-text-color: v-bind('state.style.tableColor');
-    --el-table-row-hover-bg-color: v-bind('state.style.tableCurBg');
-    --el-table-current-row-bg-color: v-bind('state.style.tableCurBg');
-    --el-table-header-bg-color: v-bind('state.style.tableHeadBg');
-    --el-bg-color: v-bind('state.style.tableBg') !important;
+  --el-table-bg-color: v-bind("state.style.tableBg") !important;
+  --el-table-tr-bg-color: v-bind("state.style.tableBg") !important;
+  --el-table-expanded-cell-bg-color: v-bind("state.style.tableBg") !important;
+
+  --el-table-border-color: v-bind("state.style.tableBorderColor");
+  --el-table-border: 1px solid var(--el-table-border-color);
+  --el-table-text-color: v-bind("state.style.tableColor");
+  --el-table-header-text-color: v-bind("state.style.tableColor");
+  --el-table-row-hover-bg-color: v-bind("state.style.tableCurBg");
+  --el-table-current-row-bg-color: v-bind("state.style.tableCurBg");
+  --el-table-header-bg-color: v-bind("state.style.tableHeadBg");
+  --el-bg-color: v-bind("state.style.tableBg") !important;
 }
 
 ::v-deep .el-table__row--level-1,
 ::v-deep .el-table__row--level-3 {
-    background: v-bind('state.style.tableChildBg') !important;
+  background: v-bind("state.style.tableChildBg") !important;
 }
 
 ::v-deep .el-table .el-table__cell {
-    padding: v-bind('state.size.tablePad');
+  padding: v-bind("state.size.tablePad");
 }
 
 .my-pagination * {
-    --el-pagination-bg-color: v-bind('state.style.bodyBg') !important;
-    --el-pagination-disabled-bg-color: v-bind('state.style.bodyBg') !important;
-    --el-pagination-text-color: v-bind('state.style.color') !important;
-    --el-pagination-button-color: v-bind('state.style.color') !important;
-    --el-pagination-button-disabled-bg-color: v-bind('state.style.bodyBg') !important;
+  --el-pagination-bg-color: v-bind("state.style.bodyBg") !important;
+  --el-pagination-disabled-bg-color: v-bind("state.style.bodyBg") !important;
+  --el-pagination-text-color: v-bind("state.style.color") !important;
+  --el-pagination-button-color: v-bind("state.style.color") !important;
+  --el-pagination-button-disabled-bg-color: v-bind("state.style.bodyBg") !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/plugs/composables/useListTable.ts b/plugs/composables/useListTable.ts
index 85470af..153355b 100644
--- a/plugs/composables/useListTable.ts
+++ b/plugs/composables/useListTable.ts
@@ -10,9 +10,14 @@ export interface TableColumn {
   code: string;
   name?: string;
   i18n?: string;
-  width: number;
-  dict?: string;
+  type?: string;
+  width?: string | number;
+  fixed?: boolean | 'left' | 'right';
+  align?: 'left' | 'center' | 'right';
   slot?: boolean;
+  dict?: string;
+  timestamp?: boolean;
+  filesize?: boolean;
 
   [others: string]: any;
 }