|
|
@ -13,153 +13,159 @@ |
|
|
v-if="tableTitle"> |
|
|
v-if="tableTitle"> |
|
|
<ns-icon v-if="showBack" class="backIcon" name="left" />{{ tableTitle }} |
|
|
<ns-icon v-if="showBack" class="backIcon" name="left" />{{ tableTitle }} |
|
|
</div> |
|
|
</div> |
|
|
<!-- {{ formConfig }} --> |
|
|
<div class="ns-table-container"> |
|
|
<a-spin :spinning="tableState.loading"> |
|
|
<div class="ns-part-tree" v-if="!isEmpty(treeConfig)"> |
|
|
<div class="ns-table-search" v-if="!isEmpty(formConfig)"> |
|
|
<ns-tree v-if="getTreeData.length" v-bind="getTreeBindValue" @select="treeSelect" /> |
|
|
<ns-form |
|
|
|
|
|
ref="formElRef" |
|
|
|
|
|
class="ns-table-form" |
|
|
|
|
|
:showAction="true" |
|
|
|
|
|
v-bind="formConfig" |
|
|
|
|
|
:expand="expand" |
|
|
|
|
|
:showExpand="showExpand" |
|
|
|
|
|
:model="formModel" |
|
|
|
|
|
@finish="formFinish" /> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<a-row type="flex" class="ns-table-main"> |
|
|
<div class="ns-part-table"> |
|
|
<a-col :flex="getTreeWidth" v-if="!isEmpty(treeConfig)"> |
|
|
<a-spin :spinning="tableState.loading"> |
|
|
|
|
|
<div class="ns-table-search" v-if="!isEmpty(formConfig)"> |
|
|
|
|
|
<ns-form |
|
|
|
|
|
ref="formElRef" |
|
|
|
|
|
class="ns-table-form" |
|
|
|
|
|
:showAction="true" |
|
|
|
|
|
v-bind="formConfig" |
|
|
|
|
|
:expand="expand" |
|
|
|
|
|
:showExpand="showExpand" |
|
|
|
|
|
:model="formModel" |
|
|
|
|
|
@finish="formFinish" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<a-row type="flex" class="ns-table-main"> |
|
|
|
|
|
<!-- <a-col :flex="getTreeWidth" v-if="!isEmpty(treeConfig)"> |
|
|
<ns-tree v-if="getTreeData.length" v-bind="getTreeBindValue" @select="treeSelect" /> |
|
|
<ns-tree v-if="getTreeData.length" v-bind="getTreeBindValue" @select="treeSelect" /> |
|
|
</a-col> |
|
|
</a-col> --> |
|
|
<a-col flex="auto"> |
|
|
<a-col flex="auto"> |
|
|
<ns-table-header |
|
|
<ns-table-header |
|
|
v-if="!isEmpty(headerActions) || tableTitle" |
|
|
v-if="!isEmpty(headerActions) || tableTitle" |
|
|
:headerActions="headerActions" |
|
|
:headerActions="headerActions" |
|
|
:searchData="formModel" |
|
|
:searchData="formModel" |
|
|
:tableTitle="tableTitle" |
|
|
:tableTitle="tableTitle" |
|
|
:data="tableState.selectedRows"> |
|
|
:data="tableState.selectedRows"> |
|
|
<template #header="data"> |
|
|
<template #header="data"> |
|
|
<slot name="header" v-bind="data || {}"></slot> |
|
|
<slot name="header" v-bind="data || {}"></slot> |
|
|
</template> |
|
|
</template> |
|
|
</ns-table-header> |
|
|
</ns-table-header> |
|
|
<ns-basic-table ref="tableElRef" v-bind="getTableBindValues" :dataSource="tableData"> |
|
|
<ns-basic-table ref="tableElRef" v-bind="getTableBindValues" :dataSource="tableData"> |
|
|
<template #emptyText> |
|
|
<template #emptyText> |
|
|
<template v-if="tableState.loadError"> |
|
|
<template v-if="tableState.loadError"> |
|
|
<div class="ns-table-content"> |
|
|
<div class="ns-table-content"> |
|
|
<div class="fetch-error"> |
|
|
<div class="fetch-error"> |
|
|
<p>{{ tableState.loadErrorMessage }}</p> |
|
|
<p>{{ tableState.loadErrorMessage }}</p> |
|
|
<ns-button type="primary" ghost @click="reload">重新加载</ns-button></div |
|
|
<ns-button type="primary" ghost @click="reload">重新加载</ns-button></div |
|
|
></div |
|
|
></div |
|
|
> |
|
|
> |
|
|
</template> |
|
|
</template> |
|
|
<template v-else-if="tableState.loading" |
|
|
<template v-else-if="tableState.loading" |
|
|
><div class="ns-table-content"></div |
|
|
><div class="ns-table-content"></div |
|
|
></template> |
|
|
></template> |
|
|
<template v-else> |
|
|
<template v-else> |
|
|
<div class="ns-table-content"> <a-empty /> </div> |
|
|
<div class="ns-table-content"> <a-empty /> </div> |
|
|
</template> |
|
|
</template> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item"> |
|
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item"> |
|
|
<slot :name="item" v-bind="data || {}"></slot> |
|
|
<slot :name="item" v-bind="data || {}"></slot> |
|
|
<template v-if="item === 'bodyCell'"> |
|
|
<template v-if="item === 'bodyCell'"> |
|
|
<template v-if="data?.column?.textEllipsis"> |
|
|
<template v-if="data?.column?.textEllipsis"> |
|
|
<span |
|
|
<span |
|
|
class="tool-tips" |
|
|
class="tool-tips" |
|
|
:style="{ width: `${data.column.textWidth || data.column.width}px` }"> |
|
|
:style="{ width: `${data.column.textWidth || data.column.width}px` }"> |
|
|
<ns-tooltip |
|
|
<ns-tooltip |
|
|
placement="top" |
|
|
placement="top" |
|
|
v-if=" |
|
|
v-if=" |
|
|
data.column.customRender |
|
|
data.column.customRender |
|
|
? data.column.customRender(data) |
|
|
? data.column.customRender(data) |
|
|
: data.record[data.column.dataIndex] |
|
|
: data.record[data.column.dataIndex] |
|
|
"> |
|
|
"> |
|
|
<template #title> |
|
|
<template #title> |
|
|
<span>{{ |
|
|
<span>{{ |
|
|
|
|
|
data.column.customRender |
|
|
|
|
|
? data.column.customRender(data) |
|
|
|
|
|
: data.record[data.column.dataIndex] || '-' |
|
|
|
|
|
}}</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
<span class="text-ellipsis">{{ |
|
|
|
|
|
data.column.customRender |
|
|
|
|
|
? data.column.customRender(data) |
|
|
|
|
|
: data.record[data.column.dataIndex] || '-' |
|
|
|
|
|
}}</span> |
|
|
|
|
|
</ns-tooltip> |
|
|
|
|
|
<span class="text-ellipsis" v-else> - </span> |
|
|
|
|
|
</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="data.column.dataIndex === 'tableAction'"> |
|
|
|
|
|
<ns-table-action |
|
|
|
|
|
:data="data.record" |
|
|
|
|
|
:searchData="formModel" |
|
|
|
|
|
:columnActions="getColumnActions" /> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="data.column.edit"> |
|
|
|
|
|
<ns-table-cell |
|
|
|
|
|
:value="data.text" |
|
|
|
|
|
:record="data.record" |
|
|
|
|
|
:column="data.column" |
|
|
|
|
|
:index="data.index" /> |
|
|
|
|
|
</template> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="item === 'footer'"> |
|
|
|
|
|
<ns-table-footer :footerActions="footerActions" :data="ediRowData" /> |
|
|
|
|
|
</template> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<template #bodyCell="data" v-if="!Object.keys($slots).includes('bodyCell')"> |
|
|
|
|
|
<template v-if="data.column.textEllipsis"> |
|
|
|
|
|
<span |
|
|
|
|
|
class="tool-tips" |
|
|
|
|
|
:style="{ width: `${data.column.textWidth || data.column.width}px` }"> |
|
|
|
|
|
<ns-tooltip |
|
|
|
|
|
placement="top" |
|
|
|
|
|
v-if=" |
|
|
|
|
|
data.column.customRender |
|
|
|
|
|
? data.column.customRender(data) |
|
|
|
|
|
: data.record[data.column.dataIndex] |
|
|
|
|
|
"> |
|
|
|
|
|
<template #title> |
|
|
|
|
|
<span>{{ |
|
|
|
|
|
data.column.customRender |
|
|
|
|
|
? data.column.customRender(data) |
|
|
|
|
|
: data.record[data.column.dataIndex] || '-' |
|
|
|
|
|
}}</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
<span class="text-ellipsis">{{ |
|
|
data.column.customRender |
|
|
data.column.customRender |
|
|
? data.column.customRender(data) |
|
|
? data.column.customRender(data) |
|
|
: data.record[data.column.dataIndex] || '-' |
|
|
: data.record[data.column.dataIndex] || '-' |
|
|
}}</span> |
|
|
}}</span> |
|
|
</template> |
|
|
</ns-tooltip> |
|
|
<span class="text-ellipsis">{{ |
|
|
<span class="text-ellipsis" v-else> - </span> |
|
|
data.column.customRender |
|
|
</span> |
|
|
? data.column.customRender(data) |
|
|
</template> |
|
|
: data.record[data.column.dataIndex] || '-' |
|
|
<template v-if="data.column.dataIndex === 'tableAction'"> |
|
|
}}</span> |
|
|
<ns-table-action |
|
|
</ns-tooltip> |
|
|
:data="data.record" |
|
|
<span class="text-ellipsis" v-else> - </span> |
|
|
:searchData="formModel" |
|
|
</span> |
|
|
:columnActions="getColumnActions" /> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="data.column.edit"> |
|
|
|
|
|
<ns-table-cell |
|
|
|
|
|
:value="data.text" |
|
|
|
|
|
:record="data.record" |
|
|
|
|
|
:column="data.column" |
|
|
|
|
|
:index="data.index" /> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
</template> |
|
|
<template v-if="data.column.dataIndex === 'tableAction'"> |
|
|
|
|
|
<ns-table-action |
|
|
<template |
|
|
:data="data.record" |
|
|
#footer |
|
|
:searchData="formModel" |
|
|
v-if="!Object.keys($slots).includes('footer') && !isEmpty(footerActions)"> |
|
|
:columnActions="getColumnActions" /> |
|
|
<ns-table-footer :footerActions="footerActions" :data="ediRowData" /> |
|
|
</template> |
|
|
|
|
|
<template v-if="data.column.edit"> |
|
|
|
|
|
<ns-table-cell |
|
|
|
|
|
:value="data.text" |
|
|
|
|
|
:record="data.record" |
|
|
|
|
|
:column="data.column" |
|
|
|
|
|
:index="data.index" /> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
</template> |
|
|
</ns-basic-table> |
|
|
<template v-if="item === 'footer'"> |
|
|
</a-col> |
|
|
<ns-table-footer :footerActions="footerActions" :data="ediRowData" /> |
|
|
</a-row> |
|
|
</template> |
|
|
</a-spin> |
|
|
</template> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<template #bodyCell="data" v-if="!Object.keys($slots).includes('bodyCell')"> |
|
|
|
|
|
<template v-if="data.column.textEllipsis"> |
|
|
|
|
|
<span |
|
|
|
|
|
class="tool-tips" |
|
|
|
|
|
:style="{ width: `${data.column.textWidth || data.column.width}px` }"> |
|
|
|
|
|
<ns-tooltip |
|
|
|
|
|
placement="top" |
|
|
|
|
|
v-if=" |
|
|
|
|
|
data.column.customRender |
|
|
|
|
|
? data.column.customRender(data) |
|
|
|
|
|
: data.record[data.column.dataIndex] |
|
|
|
|
|
"> |
|
|
|
|
|
<template #title> |
|
|
|
|
|
<span>{{ |
|
|
|
|
|
data.column.customRender |
|
|
|
|
|
? data.column.customRender(data) |
|
|
|
|
|
: data.record[data.column.dataIndex] || '-' |
|
|
|
|
|
}}</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
<span class="text-ellipsis">{{ |
|
|
|
|
|
data.column.customRender |
|
|
|
|
|
? data.column.customRender(data) |
|
|
|
|
|
: data.record[data.column.dataIndex] || '-' |
|
|
|
|
|
}}</span> |
|
|
|
|
|
</ns-tooltip> |
|
|
|
|
|
<span class="text-ellipsis" v-else> - </span> |
|
|
|
|
|
</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="data.column.dataIndex === 'tableAction'"> |
|
|
|
|
|
<ns-table-action |
|
|
|
|
|
:data="data.record" |
|
|
|
|
|
:searchData="formModel" |
|
|
|
|
|
:columnActions="getColumnActions" /> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="data.column.edit"> |
|
|
|
|
|
<ns-table-cell |
|
|
|
|
|
:value="data.text" |
|
|
|
|
|
:record="data.record" |
|
|
|
|
|
:column="data.column" |
|
|
|
|
|
:index="data.index" /> |
|
|
|
|
|
</template> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<template |
|
|
|
|
|
#footer |
|
|
|
|
|
v-if="!Object.keys($slots).includes('footer') && !isEmpty(footerActions)"> |
|
|
|
|
|
<ns-table-footer :footerActions="footerActions" :data="ediRowData" /> |
|
|
|
|
|
</template> |
|
|
|
|
|
</ns-basic-table> |
|
|
|
|
|
</a-col> |
|
|
|
|
|
</a-row> |
|
|
|
|
|
</a-spin> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -577,9 +583,9 @@ |
|
|
event: any; |
|
|
event: any; |
|
|
}, |
|
|
}, |
|
|
) { |
|
|
) { |
|
|
// console.log(selectedKeys, e); |
|
|
console.log(selectedKeys, e); |
|
|
const { dataRef } = e.selectedNodes[0].props; |
|
|
const { dataRef } = e.node; |
|
|
treeParamsRef.value = getParams(dataRef, props.params); |
|
|
treeParamsRef.value = getParams(dataRef, getTreeBindValue.value.dynamicParams); |
|
|
fetch({ |
|
|
fetch({ |
|
|
page: 1, |
|
|
page: 1, |
|
|
}); |
|
|
}); |
|
|
@ -654,6 +660,20 @@ |
|
|
margin-left: -16px; |
|
|
margin-left: -16px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.ns-table-container { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
.ns-part-tree { |
|
|
|
|
|
width: 300px; |
|
|
|
|
|
padding-top: 14px; |
|
|
|
|
|
padding-left: 8px; |
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
} |
|
|
|
|
|
.ns-part-table { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
min-width: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
.ns-table-content { |
|
|
.ns-table-content { |
|
|
// background: #e5ebf0; |
|
|
// background: #e5ebf0; |
|
|
margin: 16px; |
|
|
margin: 16px; |
|
|
|
xuziqiang
6 months ago