You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
406 lines
11 KiB
406 lines
11 KiB
<template>
|
|
<div class="asset-tree-page">
|
|
<div class="asset-container">
|
|
<!-- 左侧资产类型树 -->
|
|
<div class="asset-tree">
|
|
<el-card class="tree-card">
|
|
<template #header>
|
|
<div class="tree-header">
|
|
<span>资产类型</span>
|
|
<el-button type="primary" size="small" @click="showAssetTypeDialog = true">管理</el-button>
|
|
</div>
|
|
</template>
|
|
<el-input
|
|
v-model="treeKeyword"
|
|
placeholder="搜索资产类型"
|
|
clearable
|
|
class="tree-search"
|
|
/>
|
|
<el-tree
|
|
ref="treeRef"
|
|
:data="typeTreeData"
|
|
:props="{ label: 'assetTypeName', children: 'childrenList' }"
|
|
node-key="id"
|
|
highlight-current
|
|
:filter-node-method="filterNode"
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<template #default="{ node, data }">
|
|
<span class="custom-tree-node">
|
|
<span>{{ node.label }}</span>
|
|
<span class="node-count" v-if="data.count">({{ data.count }})</span>
|
|
</span>
|
|
</template>
|
|
</el-tree>
|
|
</el-card>
|
|
</div>
|
|
|
|
<!-- 右侧资产列表 -->
|
|
<div class="asset-list">
|
|
<el-card class="table-card">
|
|
<el-form :inline="true" :model="filters" size="small" class="filter-form">
|
|
<el-form-item label="关键词">
|
|
<el-input v-model="filters.keyword" placeholder="请输入关键词" clearable />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="fetchList">查询</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="success" @click="openAddDialog(null)">新增资产</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="showMarkTypeDialog = true">资产分类管理</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-table
|
|
:data="tableData"
|
|
row-key="id"
|
|
border
|
|
style="width: 100%;"
|
|
height="calc(100% - 120px)"
|
|
>
|
|
<el-table-column prop="assetName" label="资产名称" min-width="120" />
|
|
<el-table-column prop="assetNumber" label="资产编号" min-width="100" />
|
|
<el-table-column
|
|
prop="markType"
|
|
label="资产分类"
|
|
min-width="100"
|
|
>
|
|
<template #default="{ row }">
|
|
{{ markTypeOptions.find(opt => opt.value === row.markType)?.label || row.markType }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="assetTypeId"
|
|
label="资产类型"
|
|
min-width="100"
|
|
>
|
|
<template #default="{ row }">
|
|
{{ assetTypeOptions.find(opt => opt.value == row.assetTypeId)?.label || row.assetTypeId }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注" min-width="120" />
|
|
<el-table-column label="操作" min-width="180" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button size="small" type="warning" @click="openEditDialog(row)">编辑</el-button>
|
|
<el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
style="margin: 16px 0 0; text-align: right"
|
|
background
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
:page-size="pageSize"
|
|
:current-page="currentPage"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
/>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 弹窗集成 -->
|
|
<el-dialog v-model="showMarkTypeDialog" title="资产分类管理" width="900px" top="5vh" :close-on-click-modal="false">
|
|
<AssetCategoryView />
|
|
</el-dialog>
|
|
<!-- 弹窗集成 -->
|
|
<el-dialog v-model="showAssetTypeDialog" title="资产类型管理" width="900px" top="5vh" :close-on-click-modal="false" @closed="fetchTypeTree">
|
|
<AssetTypeView />
|
|
</el-dialog>
|
|
<!-- 新增/编辑弹窗 -->
|
|
<el-dialog v-model="showDialog" :title="dialogType==='add'?'新增资产':'编辑资产'" width="500px">
|
|
<el-form :model="form" label-width="100px">
|
|
<el-form-item label="资产名称" required>
|
|
<el-input v-model="form.assetName" />
|
|
</el-form-item>
|
|
<el-form-item label="资产编号">
|
|
<el-input v-model="form.assetNumber" />
|
|
</el-form-item>
|
|
<el-form-item label="资产分类">
|
|
<el-select v-model="form.markType" placeholder="请选择资产分类" filterable clearable>
|
|
<el-option v-for="item in markTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="资产类型">
|
|
<el-select v-model="form.assetTypeId" placeholder="请选择资产类型" filterable clearable>
|
|
<el-option v-for="item in assetTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="form.remark" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="showDialog=false">取消</el-button>
|
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, watch } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import rpc from '../utils/rpc'
|
|
import AssetTypeView from './AssetTypeView.vue'
|
|
import AssetCategoryView from './AssetCategoryView.vue'
|
|
|
|
const treeRef = ref()
|
|
const treeKeyword = ref('')
|
|
const typeTreeData = ref<any[]>([])
|
|
const tableData = ref<any[]>([])
|
|
const showDialog = ref(false)
|
|
const dialogType = ref<'add'|'edit'>('add')
|
|
const form = reactive<any>({})
|
|
const filters = reactive({
|
|
keyword: '',
|
|
assetTypeId: null as number | null
|
|
})
|
|
const total = ref(0)
|
|
const pageSize = ref(20)
|
|
const currentPage = ref(1)
|
|
const markTypeOptions = ref<{label:string,value:number}[]>([])
|
|
const assetTypeOptions = ref<{label:string,value:number}[]>([])
|
|
const showMarkTypeDialog = ref(false)
|
|
const showAssetTypeDialog = ref(false)
|
|
|
|
// 监听树形搜索关键词
|
|
watch(treeKeyword, (val) => {
|
|
treeRef.value?.filter(val)
|
|
})
|
|
|
|
// 树形过滤方法
|
|
const filterNode = (value: string, data: any) => {
|
|
if (!value) return true
|
|
return data.assetTypeName.includes(value)
|
|
}
|
|
|
|
// 获取资产类型树
|
|
const fetchTypeTree = async () => {
|
|
const res = await rpc.post('/assetType/tree', {})
|
|
typeTreeData.value = (res as any) || []
|
|
}
|
|
|
|
// 获取资产列表
|
|
const fetchList = async () => {
|
|
const res = await rpc.post('/asset/list', {
|
|
...filters,
|
|
pageSize: pageSize.value,
|
|
currentPage: currentPage.value
|
|
})
|
|
const data = res as any
|
|
tableData.value = data.rows || []
|
|
total.value = data.total || 0
|
|
}
|
|
|
|
// 获取资产分类选项
|
|
const fetchMarkTypeOptions = async () => {
|
|
const res = await rpc.post('/markType/list', {})
|
|
const rows = (res as any)?.rows || []
|
|
markTypeOptions.value = rows.map((item:any) => ({ label: item.markTypeName, value: item.markTypeId }))
|
|
}
|
|
|
|
// 获取资产类型选项
|
|
const fetchAssetTypeOptions = async () => {
|
|
const res = await rpc.post('/assetType/list', {})
|
|
const rows = (res as any)?.rows || []
|
|
assetTypeOptions.value = rows.map((item:any) => ({ label: item.assetTypeName, value: item.id }))
|
|
}
|
|
|
|
// 点击树节点
|
|
const handleNodeClick = (data: any) => {
|
|
filters.assetTypeId = data.id
|
|
currentPage.value = 1
|
|
fetchList()
|
|
}
|
|
|
|
const openAddDialog = (parent: any) => {
|
|
dialogType.value = 'add'
|
|
showDialog.value = true
|
|
Object.assign(form, {
|
|
id: null,
|
|
assetName: '',
|
|
assetNumber: '',
|
|
markType: '',
|
|
assetTypeId: filters.assetTypeId || '',
|
|
remark: ''
|
|
})
|
|
}
|
|
|
|
const openEditDialog = (data: any) => {
|
|
dialogType.value = 'edit'
|
|
showDialog.value = true
|
|
Object.assign(form, { ...data })
|
|
}
|
|
|
|
const handleDelete = (data: any) => {
|
|
ElMessageBox.confirm('确定删除该资产吗？', '提示', { type: 'warning' })
|
|
.then(async () => {
|
|
await rpc.post('/asset/delete', { id: data.id })
|
|
ElMessage.success('删除成功')
|
|
fetchList()
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
const submitForm = async () => {
|
|
if (!form.assetName) {
|
|
ElMessage.error('请输入资产名称')
|
|
return
|
|
}
|
|
if (dialogType.value === 'add') {
|
|
await rpc.post('/asset/create', form)
|
|
ElMessage.success('新增成功')
|
|
} else {
|
|
await rpc.post('/asset/update', form)
|
|
ElMessage.success('编辑成功')
|
|
}
|
|
showDialog.value = false
|
|
fetchList()
|
|
}
|
|
|
|
const handleSizeChange = (size: number) => {
|
|
pageSize.value = size
|
|
fetchList()
|
|
}
|
|
|
|
const handleCurrentChange = (page: number) => {
|
|
currentPage.value = page
|
|
fetchList()
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchTypeTree()
|
|
fetchMarkTypeOptions()
|
|
fetchAssetTypeOptions()
|
|
fetchList()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.asset-tree-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, #041236 0%, #02081A 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.asset-container {
|
|
display: flex;
|
|
gap: 20px;
|
|
height: 100%;
|
|
}
|
|
|
|
.asset-tree {
|
|
width: 280px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.asset-list {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tree-card {
|
|
height: 100%;
|
|
background: rgba(4, 26, 71, 0.7);
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 20px #0003;
|
|
}
|
|
|
|
.tree-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #6eeaff;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tree-search {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.custom-tree-node {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.node-count {
|
|
color: #00c3ff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.table-card {
|
|
height: 100%;
|
|
background: rgba(4, 26, 71, 0.7);
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 20px #0003;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-form {
|
|
padding: 0 0 8px 0;
|
|
}
|
|
|
|
.el-table {
|
|
background: transparent;
|
|
color: #e6f7ff;
|
|
}
|
|
|
|
.el-table th {
|
|
background: #002140;
|
|
color: #6eeaff;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.el-table .el-button {
|
|
box-shadow: 0 0 8px #00c3ff88;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.el-pagination {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
:deep(.el-tree) {
|
|
background: transparent;
|
|
color: #e6f7ff;
|
|
}
|
|
|
|
:deep(.el-tree-node__content:hover) {
|
|
background: rgba(0, 195, 255, 0.1);
|
|
}
|
|
|
|
:deep(.el-tree-node.is-current > .el-tree-node__content) {
|
|
background: rgba(0, 195, 255, 0.2);
|
|
color: #00c3ff;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background: rgba(0, 33, 64, 0.5);
|
|
box-shadow: 0 0 0 1px rgba(0, 195, 255, 0.2);
|
|
}
|
|
|
|
:deep(.el-input__wrapper:hover) {
|
|
box-shadow: 0 0 0 1px rgba(0, 195, 255, 0.4);
|
|
}
|
|
|
|
:deep(.el-input__wrapper.is-focus) {
|
|
box-shadow: 0 0 0 1px #00c3ff;
|
|
}
|
|
|
|
:deep(.el-select .el-input__wrapper) {
|
|
background: rgba(0, 33, 64, 0.5);
|
|
}
|
|
</style> |