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

<template>
  <div class="list-table" :style="containerStyle">
    <div class="my-table">
      <el-table
        ref="table"
        :size="state.size.size"
        height="0"
        :fit="true"
        :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)"
        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="{ row }">
            <slot :name="item.code" :row="row"></slot>
          </template>

          <template v-if="item.dict" #default="{ row }">
            {{ formatterByDist(item.dict, lodash.get(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>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, watch, onUpdated, computed } from "vue";
import { useI18n } from "vue3-i18n";
import { TableColumn } from "noob-mengyxu";
import * as lodash from "lodash-es";
// import { PageExample } from "noob-mengyxu";
const { t } = useI18n();
const { state } = useStore();
const table = ref();

const containerStyle = computed(() => {
  const style: Record<string, string> = {};
  if (prop.height !== undefined) {
    style.height = typeof prop.height === "number" ? `${prop.height}px` : String(prop.height);
  }
  if (prop.maxHeight !== undefined) {
    style.maxHeight = typeof prop.maxHeight === "number" ? `${prop.maxHeight}px` : String(prop.maxHeight);
  }
  return style;
});

interface Props {
  data?: any;
  props?: TableColumn[];
  page?: boolean;
  height?: number | string;
  maxHeight?: number | string;
  example?: any;
  rowKey?: string;
  selectKey?: string;
  treeProps?: any;
  lazy?: boolean;
  border?: boolean;
}

const prop = withDefaults(defineProps<Props>(), {
  data: () => [],
  props: () => [],
  page: false,
  height: undefined,
  maxHeight: 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>
.list-table {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.my-table {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.my-table .el-table {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}

.my-table .el-table__inner-wrapper {
  height: 100% !important;
}

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

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

.list-table :deep(.el-table .el-table__cell) {
  padding: v-bind("state.size.tablePad");
}

.my-pagination {
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.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>