push
This commit is contained in:
xuziqiang
246
lib/paas/view/service/list-table.vue
Normal file
246
lib/paas/view/service/list-table.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div :key="'table_' + $route.name">
|
||||
<page-title :title="getTitle" v-if="showTitle" />
|
||||
<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, unref, ref } from 'vue';
|
||||
import { tableProps } from '/nerv-lib/component/table/props';
|
||||
import { PropTypes } from '/nerv-lib/util/type';
|
||||
import { cloneDeep, isArray, isUndefined } from 'lodash-es';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NsViewListTable',
|
||||
props: {
|
||||
...tableProps,
|
||||
title: PropTypes.string,
|
||||
tableTitle: PropTypes.func,
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const nsTableRef = ref();
|
||||
const route = useRoute();
|
||||
|
||||
const formatFilterSearch = (key, filter) => {
|
||||
let selector = filter.filter((item) => {
|
||||
return item.name.startsWith(key);
|
||||
});
|
||||
let selectorValue = selector.map((item) => {
|
||||
item.name = item.name.replace(key, '');
|
||||
console.log('item.value', item.value);
|
||||
if (item.name) return `${item.name}=${item.value.join('|')}`;
|
||||
return `${item.value.join('|')}`;
|
||||
});
|
||||
return selectorValue.join(',');
|
||||
};
|
||||
|
||||
const getFormConfig = computed(() => {
|
||||
const formConfig = cloneDeep(props.formConfig);
|
||||
|
||||
if (formConfig) {
|
||||
if (isUndefined(formConfig.showAction)) {
|
||||
formConfig.showAction = false;
|
||||
}
|
||||
if (!isArray(formConfig.schemas)) {
|
||||
formConfig.schemas = [];
|
||||
}
|
||||
formConfig['formLayout'] = 'flex';
|
||||
//过滤标签搜索组件
|
||||
if (formConfig.keyFilter === true) {
|
||||
formConfig.schemas.push(
|
||||
{
|
||||
field: 'selector',
|
||||
component: 'NsInputText',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'labels',
|
||||
component: 'NsInputText',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'search',
|
||||
component: 'NsInputText',
|
||||
show: false,
|
||||
},
|
||||
);
|
||||
formConfig.schemas.push({
|
||||
field: 'filter',
|
||||
label: '关键字',
|
||||
component: 'NsInputFilter',
|
||||
rules: [],
|
||||
componentProps: {
|
||||
maxlength: 50,
|
||||
allowClear: true,
|
||||
api: formConfig.api,
|
||||
terraceType:
|
||||
typeof formConfig.terraceType != 'undefined'
|
||||
? formConfig.terraceType
|
||||
: 'dataSource',
|
||||
isNeedHttpGet:
|
||||
typeof formConfig.isNeedHttpGet != 'undefined' ? formConfig.isNeedHttpGet : true,
|
||||
filterList: formConfig.filterList ? formConfig.filterList : [],
|
||||
type: typeof formConfig.type != 'undefined' ? formConfig.type : '',
|
||||
defaultFilterList:
|
||||
typeof formConfig.defaultFilterList != 'undefined'
|
||||
? formConfig.defaultFilterList
|
||||
: false,
|
||||
onSearch: () => {
|
||||
let filter = unref(nsTableRef)?.formElRef.model.filter;
|
||||
if (!filter) {
|
||||
let list = ['selector', 'labels', 'search'];
|
||||
list.map((elem) => {
|
||||
unref(nsTableRef).formElRef.setFormModel(elem, null);
|
||||
});
|
||||
unref(nsTableRef)?.formElRef?.triggerSubmit();
|
||||
return;
|
||||
}
|
||||
filter = JSON.parse(decodeURIComponent(filter));
|
||||
let selectorValue = formatFilterSearch('selector=', filter);
|
||||
let labelValue = formatFilterSearch('labels=', filter);
|
||||
let searchValue = formatFilterSearch('search=', filter);
|
||||
unref(nsTableRef).formElRef.model.selector = selectorValue || null;
|
||||
unref(nsTableRef).formElRef.model.labels = labelValue || null;
|
||||
unref(nsTableRef).formElRef.model.search = searchValue || null;
|
||||
unref(nsTableRef).formElRef.model.filter = null;
|
||||
console.log('www',unref(nsTableRef))
|
||||
unref(nsTableRef)?.formElRef?.triggerSubmit();
|
||||
},
|
||||
onChange: (text) => {},
|
||||
placeholder: '请输入关键字',
|
||||
},
|
||||
});
|
||||
} else if (formConfig.keySearch !== false) {
|
||||
formConfig.schemas.push({
|
||||
field: 'search',
|
||||
label: '关键字',
|
||||
component: 'NsInputSearch',
|
||||
rules: [
|
||||
{
|
||||
message: '请输入关键字',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
maxlength: 50,
|
||||
onSearch: () => {
|
||||
unref(nsTableRef)?.formElRef?.triggerSubmit();
|
||||
},
|
||||
onKeydown: (event: KeyboardEvent) => {
|
||||
//fix 单个input回车会提交表单 造成重复提交
|
||||
if (event.key === 'Enter' || event.code === 'Enter') {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
placeholder: '请输入关键字',
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return formConfig;
|
||||
});
|
||||
const getBindValue = computed(() => ({
|
||||
// scroll: { x: 1000 },
|
||||
...attrs,
|
||||
...props,
|
||||
enableTableSession: true,
|
||||
formLayout: 'flex',
|
||||
title: null,
|
||||
formConfig: getFormConfig.value,
|
||||
}));
|
||||
const getTitle = computed(() => {
|
||||
const {
|
||||
params: { pageTitle },
|
||||
} = route;
|
||||
if (pageTitle) return pageTitle;
|
||||
const { title } = props;
|
||||
if (title) return title;
|
||||
});
|
||||
return { getBindValue, nsTableRef, getTitle };
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBack() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.ns-form-item) {
|
||||
min-width: 220px !important;
|
||||
}
|
||||
|
||||
:deep(.ns-operate-expand) {
|
||||
display: inline-block;
|
||||
padding: 4px 2px !important;
|
||||
border: unset !important;
|
||||
}
|
||||
|
||||
:deep(.ns-table) {
|
||||
position: relative;
|
||||
.ns-table-main {
|
||||
padding: 0 24px;
|
||||
}
|
||||
.ns-table-search {
|
||||
padding: 18px 24px 0 24px;
|
||||
}
|
||||
//tableList组件
|
||||
.ns-table-header {
|
||||
width: auto;
|
||||
min-width: 100px;
|
||||
user-select: none;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 18px;
|
||||
text-align: left;
|
||||
position: absolute !important;
|
||||
left: 0;
|
||||
top: -80px;
|
||||
|
||||
.ant-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.ns-form-item label {
|
||||
display: none;
|
||||
}
|
||||
&.ns-table-no-search {
|
||||
.ns-table-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ns-table-header {
|
||||
position: relative !important;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ns-line) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before
|
||||
) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user