feat: 设备台账
This commit is contained in:
xuziqiang
@@ -13,153 +13,159 @@
|
||||
v-if="tableTitle">
|
||||
<ns-icon v-if="showBack" class="backIcon" name="left" />{{ tableTitle }}
|
||||
</div>
|
||||
<!-- {{ formConfig }} -->
|
||||
<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 class="ns-table-container">
|
||||
<div class="ns-part-tree" v-if="!isEmpty(treeConfig)">
|
||||
<ns-tree v-if="getTreeData.length" v-bind="getTreeBindValue" @select="treeSelect" />
|
||||
</div>
|
||||
<a-row type="flex" class="ns-table-main">
|
||||
<a-col :flex="getTreeWidth" v-if="!isEmpty(treeConfig)">
|
||||
<div class="ns-part-table">
|
||||
<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" />
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<ns-table-header
|
||||
v-if="!isEmpty(headerActions) || tableTitle"
|
||||
:headerActions="headerActions"
|
||||
:searchData="formModel"
|
||||
:tableTitle="tableTitle"
|
||||
:data="tableState.selectedRows">
|
||||
<template #header="data">
|
||||
<slot name="header" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
</ns-table-header>
|
||||
<ns-basic-table ref="tableElRef" v-bind="getTableBindValues" :dataSource="tableData">
|
||||
<template #emptyText>
|
||||
<template v-if="tableState.loadError">
|
||||
<div class="ns-table-content">
|
||||
<div class="fetch-error">
|
||||
<p>{{ tableState.loadErrorMessage }}</p>
|
||||
<ns-button type="primary" ghost @click="reload">重新加载</ns-button></div
|
||||
></div
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="tableState.loading"
|
||||
><div class="ns-table-content"></div
|
||||
></template>
|
||||
<template v-else>
|
||||
<div class="ns-table-content"> <a-empty /> </div>
|
||||
</template>
|
||||
</template>
|
||||
</a-col> -->
|
||||
<a-col flex="auto">
|
||||
<ns-table-header
|
||||
v-if="!isEmpty(headerActions) || tableTitle"
|
||||
:headerActions="headerActions"
|
||||
:searchData="formModel"
|
||||
:tableTitle="tableTitle"
|
||||
:data="tableState.selectedRows">
|
||||
<template #header="data">
|
||||
<slot name="header" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
</ns-table-header>
|
||||
<ns-basic-table ref="tableElRef" v-bind="getTableBindValues" :dataSource="tableData">
|
||||
<template #emptyText>
|
||||
<template v-if="tableState.loadError">
|
||||
<div class="ns-table-content">
|
||||
<div class="fetch-error">
|
||||
<p>{{ tableState.loadErrorMessage }}</p>
|
||||
<ns-button type="primary" ghost @click="reload">重新加载</ns-button></div
|
||||
></div
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="tableState.loading"
|
||||
><div class="ns-table-content"></div
|
||||
></template>
|
||||
<template v-else>
|
||||
<div class="ns-table-content"> <a-empty /> </div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
<template v-if="item === '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>{{
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
<template v-if="item === '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 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)
|
||||
: 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>
|
||||
</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="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)
|
||||
: 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>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -577,9 +583,9 @@
|
||||
event: any;
|
||||
},
|
||||
) {
|
||||
// console.log(selectedKeys, e);
|
||||
const { dataRef } = e.selectedNodes[0].props;
|
||||
treeParamsRef.value = getParams(dataRef, props.params);
|
||||
console.log(selectedKeys, e);
|
||||
const { dataRef } = e.node;
|
||||
treeParamsRef.value = getParams(dataRef, getTreeBindValue.value.dynamicParams);
|
||||
fetch({
|
||||
page: 1,
|
||||
});
|
||||
@@ -654,6 +660,20 @@
|
||||
margin-left: -16px;
|
||||
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 {
|
||||
// background: #e5ebf0;
|
||||
margin: 16px;
|
||||
|
||||
@@ -102,22 +102,31 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
//关闭 sticky 模式 底部滚动条
|
||||
@gap: 16px;
|
||||
@border-gap: @gap solid #e5ebf0;
|
||||
:deep(.ns-table-container) {
|
||||
border-top: @border-gap;
|
||||
}
|
||||
|
||||
:deep(.ns-table) {
|
||||
.ns-part-tree {
|
||||
border-right: @border-gap;
|
||||
height: calc(100vh - 158px);
|
||||
}
|
||||
.ns-table-main {
|
||||
padding: 0px 16px;
|
||||
border-top: 16px solid #e5ebf0;
|
||||
padding: 0px @gap;
|
||||
border-top: @border-gap;
|
||||
// margin: 16px;
|
||||
// background-color: #fff;
|
||||
}
|
||||
.ns-table-search {
|
||||
padding: 16px 16px 0;
|
||||
padding: @gap @gap 0;
|
||||
// margin: 16px;
|
||||
background: #fff;
|
||||
// border-width: 16px 0 16px 0px;
|
||||
// border-color: #e5ebf0;
|
||||
// border-style: solid;
|
||||
border-top: 16px solid #e5ebf0;
|
||||
// border-top: 16px solid #e5ebf0;
|
||||
}
|
||||
.ns-table-header {
|
||||
position: sticky;
|
||||
@@ -130,14 +139,14 @@
|
||||
display: none !important;
|
||||
}
|
||||
.ns-basic-table {
|
||||
padding-top: 16px;
|
||||
padding-top: @gap;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ns-form::after) {
|
||||
background-color: #f0f2f5;
|
||||
display: none;
|
||||
margin: 0 16px;
|
||||
width: calc(100% - 32px);
|
||||
margin: @gap;
|
||||
width: calc(100% - @gap * 2);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user