修复首页图表resize逻辑并添加组件卸载时的资源清理

This commit is contained in:
WUSIJIAN
2025-12-22 15:26:34 +08:00
parent ac0b790363
commit 4fedcd16df
2 changed files with 100 additions and 87 deletions

View File

@@ -1,88 +1,90 @@
<template>
<div class="assets-asset-container">
<el-card shadow="hover">
<div class="assets-asset-search mb15">
<el-form :inline="true" :model="tableData.param">
<el-form-item label="资产名称">
<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入资产名称" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="资产类型">
<el-select size="default" v-model="tableData.param.type" placeholder="请选择资产类型" clearable style="width: 150px">
<el-option label="实物" value="physical" />
<el-option label="虚拟" value="virtual" />
<el-option label="服务" value="service" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
<el-option label="启用" :value="1" />
<el-option label="用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" @click="getAssetList">
<el-icon><ele-Search /></el-icon>
查询
</el-button>
<el-button size="default" @click="onResetQuery">
<el-icon><ele-Refresh /></el-icon>
重置
</el-button>
<el-button size="default" type="success" @click="onOpenAdd">
<el-icon><ele-Plus /></el-icon>
新增
</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="name" label="资产名称" min-width="150" show-overflow-tooltip />
<el-table-column prop="type" label="资产类型" width="100" align="center">
<template #default="scope">
<el-tag :type="getTypeTagType(scope.row.type)">{{ getTypeLabel(scope.row.type) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text="启用"
inactive-text=""
@change="onStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column prop="onlineTime" label="上线时间" width="170" show-overflow-tooltip />
<el-table-column prop="offlineTime" label="线时间" width="170" show-overflow-tooltip />
<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
<el-table-column label="操作" width="200" fixed="right" align="center">
<template #default="scope">
<el-button size="small" text type="primary" @click="onEdit(scope.row)">修改</el-button>
<el-button size="small" text type="success" @click="onAddSku(scope.row)">添加SKU</el-button>
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="mt15" style="text-align: right">
<el-pagination
v-model:current-page="tableData.param.page"
v-model:page-size="tableData.param.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="tableData.total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="onSizeChange"
@current-change="onCurrentChange"
/>
</div>
</el-card>
<div class="assets-asset-page">
<div class="assets-asset-container">
<el-card shadow="hover">
<div class="assets-asset-search mb15">
<el-form :inline="true" :model="tableData.param">
<el-form-item label="资产名称">
<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入资产名称" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="资产类型">
<el-select size="default" v-model="tableData.param.type" placeholder="请选择资产类型" clearable style="width: 150px">
<el-option label="实物" value="physical" />
<el-option label="虚拟" value="virtual" />
<el-option label="服务" value="service" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
<el-option label="用" :value="1" />
<el-option label="禁用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" @click="getAssetList">
<el-icon><ele-Search /></el-icon>
查询
</el-button>
<el-button size="default" @click="onResetQuery">
<el-icon><ele-Refresh /></el-icon>
重置
</el-button>
<el-button size="default" type="success" @click="onOpenAdd">
<el-icon><ele-Plus /></el-icon>
新增
</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="name" label="资产名称" min-width="150" show-overflow-tooltip />
<el-table-column prop="type" label="资产类型" width="100" align="center">
<template #default="scope">
<el-tag :type="getTypeTagType(scope.row.type)">{{ getTypeLabel(scope.row.type) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text=""
inactive-text="禁用"
@change="onStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column prop="onlineTime" label="线时间" width="170" show-overflow-tooltip />
<el-table-column prop="offlineTime" label="下线时间" width="170" show-overflow-tooltip />
<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
<el-table-column label="操作" width="200" fixed="right" align="center">
<template #default="scope">
<el-button size="small" text type="primary" @click="onEdit(scope.row)">修改</el-button>
<el-button size="small" text type="success" @click="onAddSku(scope.row)">添加SKU</el-button>
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="mt15" style="text-align: right">
<el-pagination
v-model:current-page="tableData.param.page"
v-model:page-size="tableData.param.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="tableData.total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="onSizeChange"
@current-change="onCurrentChange"
/>
</div>
</el-card>
</div>
<EditAsset ref="editAssetRef" @getAssetList="getAssetList" />
</div>
<EditAsset ref="editAssetRef" @getAssetList="getAssetList" />
</template>
<script lang="ts">