<script lang="ts" setup>
|
import type { SorterResult } from '@jnpf/ui/vxeTable';
|
|
import { computed, onMounted, reactive, unref } from 'vue';
|
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { isNullOrUnDef } from '@jnpf/utils';
|
|
import { RedoOutlined } from '@ant-design/icons-vue';
|
import { Tooltip } from 'ant-design-vue';
|
|
import { getRelationQueryList } from '#/api/onlineDev/visualDev';
|
import { $t } from '#/locales';
|
import ChildTableColumn from '#/views/common/dynamicModel/list/ChildTableColumn.vue';
|
|
import { relationQueryProps } from './props';
|
|
interface State {
|
mergeList: any[];
|
}
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfRelationQuery' });
|
const props = defineProps(relationQueryProps);
|
const state = reactive<State>({
|
mergeList: [],
|
});
|
const [registerTable, { reload }] = useVxeTable({
|
immediate: false,
|
showTableSetting: false,
|
spanMethod,
|
});
|
|
const getPagination = computed<any>(() => {
|
if (!props.hasPage) return false;
|
return {
|
size: 'small',
|
pageSize: props.pageSize,
|
defaultPageSize: props.pageSize || 20,
|
showTotal: (total) => $t('component.table.total', { total }),
|
showSizeChanger: true,
|
pageSizeOptions: ['20', '50', '80', '100'],
|
showQuickJumper: true,
|
};
|
});
|
const getSearchInfo = computed(() => {
|
for (const element of props.queryRule.conditionList || []) {
|
for (let i = 0; i < element.groups.length; i++) {
|
const item = element.groups[i];
|
if (item.fieldValueType === 1) {
|
if (!item.fieldValue_) item.fieldValue_ = item.fieldValue;
|
const data = props.formData || {};
|
const key = `${item.fieldValue_}_jnpfId`;
|
const value = isNullOrUnDef(data[key]) ? (isNullOrUnDef(data[item.fieldValue_]) ? '' : data[item.fieldValue_]) : data[key];
|
item.fieldValue = item.fieldValue_ ? value : '';
|
}
|
}
|
}
|
return {
|
modelId: props.modelId,
|
superQueryJson: JSON.stringify(props.queryRule),
|
columnOptions: unref(getColumnOptions)
|
.map((o) => o.value)
|
.join(','),
|
};
|
});
|
const getTableBindValue = computed(() => {
|
const defaultSortConfig = (props.sortRule || []).map((o: any) => (o.sort === 'desc' ? '-' : '') + o.field);
|
const data: any = {
|
api: getRelationQueryList,
|
columns: unref(getColumns),
|
pagination: unref(getPagination),
|
searchInfo: unref(getSearchInfo),
|
size: 'small',
|
rowKey: 'id',
|
border: true,
|
showOverflow: true,
|
immediate: false,
|
defSort: { sidx: defaultSortConfig.join(',') },
|
sortConfig: { multiple: true },
|
sortFn: (sortInfo: SorterResult | SorterResult[]) => {
|
if (Array.isArray(sortInfo)) {
|
const sortList = sortInfo.map((o) => (o.order === 'desc' ? '-' : '') + o.field);
|
return { sidx: sortList.join(',') };
|
} else {
|
const { field, order } = sortInfo;
|
return field && order ? { sidx: (order === 'desc' ? '-' : '') + field } : {};
|
}
|
},
|
};
|
return data;
|
});
|
const getColumnOptions = computed(() => (props.columnOptions as any).filter((o) => !!o.value));
|
const getColumns = computed<any[]>(() => {
|
const list: any[] = [];
|
for (const e of unref(getColumnOptions)) {
|
if (e.value.includes('-')) {
|
const value = e.value.split('-')[0];
|
const childValue = e.value.split('-')[1];
|
const label = e.label.split('-')[0];
|
const childLabel = e.label.replace(`${label}-`, '');
|
const newItem = {
|
dataIndex: value,
|
prop: value,
|
jnpfKey: 'table',
|
label,
|
title: label,
|
value,
|
children: [],
|
};
|
e.dataIndex = e.value;
|
e.prop = e.value;
|
e.title = childLabel;
|
e.minWidth = 200;
|
e.jnpfKey = '';
|
e.__vModel__ = childValue;
|
if (!list.some((o) => o.value === value)) list.push(newItem);
|
for (const element of list) {
|
if (element.value === value) {
|
const childItem = element.children.length ? e : { ...e, slots: { default: element.dataIndex }, showOverflow: false, className: 'child-table-box' };
|
element.children.push(childItem);
|
break;
|
}
|
}
|
} else {
|
list.push({ dataIndex: e.value, prop: e.value, title: e.label, minWidth: 200, sortable: true, slots: { default: e.value }, jnpfKey: '' });
|
}
|
}
|
getMergeList(list);
|
return list;
|
});
|
const getChildColumnList = computed(() => unref(getColumns).filter((o) => o.jnpfKey === 'table'));
|
|
function toggleExpand(row, field) {
|
row[field] = !row[field];
|
}
|
function getMergeList(list) {
|
list.forEach((item) => {
|
if (item.jnpfKey === 'table' && item.children?.length) {
|
item.children.forEach((child, index) => {
|
state.mergeList.push({
|
prop: child.prop,
|
rowspan: index == 0 ? 1 : 0,
|
colspan: index == 0 ? item.children.length : 0,
|
});
|
});
|
}
|
});
|
}
|
function spanMethod({ column }) {
|
for (let i = 0; i < state.mergeList.length; i++) {
|
if (column.property == state.mergeList[i].prop) {
|
return { rowspan: state.mergeList[i].rowspan, colspan: state.mergeList[i].colspan };
|
}
|
}
|
}
|
function handleReload() {
|
getColumnOptions.value?.length && reload({ page: 1 });
|
}
|
|
onMounted(() => {
|
if (!props.defaultEmpty) handleReload();
|
});
|
</script>
|
|
<template>
|
<div class="jnpf-relation-query">
|
<div class="table-contain">
|
<div class="table-header">
|
<div class="table-title">{{ props.showTitle ? props.title : '' }}</div>
|
<Tooltip placement="top" :title="$t('common.redo')">
|
<a class="leading-none" @click="handleReload"><RedoOutlined /></a>
|
</Tooltip>
|
</div>
|
<div class="designer-tips" v-if="!getColumnOptions?.length">未配置显示字段，请在右侧完成配置</div>
|
<BasicVxeTable class="!h-[400px]" @register="registerTable" v-bind="getTableBindValue" v-else>
|
<template #[column.prop]="{ record }" v-for="column in getColumns" :key="column.prop"> {{ record[column.prop] }}</template>
|
<template #[item.dataIndex]="{ record }" v-for="(item, index) in getChildColumnList" :key="item.dataIndex">
|
<ChildTableColumn
|
:data="record[item.prop]"
|
:head="item.children"
|
@toggle-expand="toggleExpand(record, `${item.prop}Expand`)"
|
:expand="record[`${item.prop}Expand`]"
|
:show-overflow="true"
|
:key="index" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.jnpf-relation-query {
|
background-color: var(--component-background);
|
|
.table-contain {
|
overflow: auto;
|
|
.designer-tips {
|
padding: 10px;
|
margin: 10px;
|
text-align: center;
|
border: 1px solid var(--border-color-base1);
|
border-radius: 4px;
|
}
|
|
.table-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 40px;
|
padding: 0 10px;
|
line-height: 40px;
|
|
.table-title {
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
</style>
|
