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
Split 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 @@ @@ -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>
</style>

9
plugs/composables/useListTable.ts
Unescape View File

@ -10,9 +10,14 @@ export interface TableColumn { @@ -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;
}

Write Preview
Loading…
Cancel
Save