You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

170 lines
4.4 KiB

<!-- @format -->
<template>
<div class="ns-list-table ns-view">
<ns-table ref="nsTableRef" v-bind="getBindValue">
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
<slot :name="item" v-bind="data"></slot>
</template>
</ns-table>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, unref, nextTick } from 'vue';
import { tableProps } from '/nerv-lib/component/table/props';
import { PropTypes } from '/nerv-lib/util/type';
import { cloneDeep, get, isArray } from 'lodash-es';
export default defineComponent({
name: 'NsViewListTable',
props: {
...tableProps,
title: PropTypes.string,
},
setup(props, { attrs }) {
const nsTableRef = ref();
const getPageParams = (dataRef, curepage?) => {
let pageCount = get(dataRef.value, props.pageCountField);
let pageSize = get(dataRef.value, props.sizeField);
let total = 0;
let page = 0;
const tableData = get(unref(dataRef), props.listField);
if (pageCount) {
let totalMax = pageCount * pageSize;
if (get(dataRef.value, props.totalField)) {
total =
totalMax > get(dataRef.value, props.totalField)
? get(dataRef.value, props.totalField)
: totalMax;
} else {
total = totalMax;
}
} else {
total = get(dataRef.value, props.totalField);
}
if (isArray(tableData) ? !tableData.length : false && curepage) {
//后端从0开始
if (curepage !== 0) {
page =
curepage > pageCount - props.pageFieldOffset
? pageCount - props.pageFieldOffset
: curepage;
}
} else {
page = curepage;
}
return { total, page };
};
const formConfig = cloneDeep(props.formConfig);
const getFormConfig = computed(() => {
const formConfig = cloneDeep(props.formConfig);
// if (formConfig) {
// formConfig['formLayout'] = 'flexv2';
// }
return formConfig;
});
const getBindValue = computed(() => ({
...attrs,
...props,
title: props.tableTitle,
tableTitle: props.title,
getPageParams: getPageParams,
formConfig: getFormConfig.value,
sticky:
props.sticky === false
? false
: { offsetHeader: props.headerActions.length === 0 && !props.title ? 0 : 0 },
}));
if (formConfig) {
nextTick(() => {
unref(nsTableRef)?.formElRef?.triggerSubmit();
});
}
return { getBindValue, nsTableRef };
},
//缓存界面重新调用reload
activated() {
if (unref(this.nsTableRef)) {
unref(this.nsTableRef).reload();
}
},
});
</script>
<style lang="less" scoped>
//关闭 sticky 模式 底部滚动条
@gap: 16px;
@border-gap: @gap solid @ns-content-bg;
// 以防样式串
.ns-list-table:not(.ant-drawer-body > *):not(.ant-form > *) {
height: 100%;
background-color: @ns-content-bg;
:deep(.ns-table) {
height: inherit;
.ns-table-container,
.ns-part-tree,
.ant-spin-container {
height: inherit;
}
.ns-part-tree,
.ns-table-search,
.ns-table-main {
background-color: @white;
border-radius: @ns-border-radius;
box-shadow: @ns-content-box-shadow;
}
.ns-table-container {
gap: @ns-gap;
}
.ns-part-tree {
}
.ns-part-table {
border-radius: @ns-border-radius;
}
.ns-table-main {
padding: 0px @gap;
margin-top: @ns-gap;
background-color: @white;
box-shadow: @ns-content-box-shadow;
// border-top: @border-gap;
// margin: 16px;
// background-color: #fff;
}
.ns-table-search {
padding: @gap @gap 0;
}
.ns-table-header {
// position: sticky;
z-index: 3;
top: 0;
left: 0;
background-color: @white;
}
.ant-table-sticky-scroll {
display: none !important;
}
.ns-basic-table {
padding-top: @gap;
}
}
}
:deep(.ns-form::after) {
background-color: #f0f2f5;
display: none;
margin: @gap;
width: calc(100% - @gap * 2);
}
</style>