hechang27
/
noob-components
forked from mengyxu/noob-components
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: update list-table prop definition

hechang27-sprt 6 months ago
parent
c53c953faa
commit
a952dfddde
2 changed files with 158 additions and 156 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 305
      packages/base/data/list-table.vue
  2. 9
      plugs/composables/useListTable.ts

305
packages/base/data/list-table.vue
Unescape View File

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

9
plugs/composables/useListTable.ts
Unescape View File

@ -10,9 +10,14 @@ export interface TableColumn {
code: string; code: string;
name?: string; name?: string;
i18n?: string; i18n?: string;
width: number; type?: string;
dict?: string; width?: string | number;
fixed?: boolean | 'left' | 'right';
align?: 'left' | 'center' | 'right';
slot?: boolean; slot?: boolean;
dict?: string;
timestamp?: boolean;
filesize?: boolean;
[others: string]: any; [others: string]: any;
} }

Write Preview
Loading…
Cancel
Save