noob-components/packages/base/data/list-table.vue

<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)"
      @cell-click="(row, column, cell, event) => emit('cell-click', row, column, cell, 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();

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", "cell-click"]);

const selectionChange = (selection) => {
  emit("selection-change", selection);
};

const handleSizeChange = (val) => {
  prop.example.size = val;
  emit("query");
};

const handleCurrentChange = (val) => {
  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 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 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 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);
};

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];
};

const select = (n) => {
  if (n.selectKey && table.value) {
    n.data.forEach((e) => {
      table.value.toggleRowSelection(e, e[n.selectKey]);
    });
  }
};

const load = (dict, node, resolve) => {
  resolve(dict.child);
};

watch(prop, select);

onMounted(() => {});
onUpdated(() => {
  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;
}

::v-deep .el-table__row--level-1,
::v-deep .el-table__row--level-3 {
  background: v-bind("state.style.tableChildBg") !important;
}

::v-deep .el-table .el-table__cell {
  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;
}
</style>