新增资产管理页面,实现资产列表查询、状态切换和删除功能
This commit is contained in:
WUSIJIAN
37
src/api/assets/asset/index.ts
Normal file
37
src/api/assets/asset/index.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { newService } from '/@/utils/request';
|
||||||
|
|
||||||
|
// 资产列表查询参数
|
||||||
|
export interface AssetQueryParams {
|
||||||
|
name?: string;
|
||||||
|
type?: string;
|
||||||
|
status?: number;
|
||||||
|
page?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取资产列表
|
||||||
|
export function listAssets(params?: AssetQueryParams) {
|
||||||
|
return newService({
|
||||||
|
url: '/assets/asset/listAssets',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新资产状态
|
||||||
|
export function updateAssetStatus(id: string, status: number) {
|
||||||
|
return newService({
|
||||||
|
url: '/assets/asset/updateAssetStatus',
|
||||||
|
method: 'put',
|
||||||
|
data: { id, status },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除资产
|
||||||
|
export function deleteAsset(id: string) {
|
||||||
|
return newService({
|
||||||
|
url: '/assets/asset/deleteAsset',
|
||||||
|
method: 'delete',
|
||||||
|
params: { id },
|
||||||
|
});
|
||||||
|
}
|
||||||
237
src/views/assets/asset/index.vue
Normal file
237
src/views/assets/asset/index.vue
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
<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.name" 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-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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'assetsAsset',
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, onMounted } from 'vue';
|
||||||
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||||
|
import { listAssets, updateAssetStatus, deleteAsset } from '/@/api/assets/asset';
|
||||||
|
|
||||||
|
interface AssetRow {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
categoryId: string;
|
||||||
|
description: string;
|
||||||
|
imageUrl: string;
|
||||||
|
images: string[];
|
||||||
|
onlineTime: string;
|
||||||
|
offlineTime: string;
|
||||||
|
status: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableData = reactive({
|
||||||
|
data: [] as AssetRow[],
|
||||||
|
loading: false,
|
||||||
|
total: 0,
|
||||||
|
param: {
|
||||||
|
name: '',
|
||||||
|
type: '',
|
||||||
|
status: undefined as number | undefined,
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取资产类型标签类型
|
||||||
|
const getTypeTagType = (type: string) => {
|
||||||
|
const typeMap: Record<string, string> = {
|
||||||
|
physical: 'primary',
|
||||||
|
virtual: 'success',
|
||||||
|
service: 'warning',
|
||||||
|
};
|
||||||
|
return typeMap[type] || 'info';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取资产类型标签文本
|
||||||
|
const getTypeLabel = (type: string) => {
|
||||||
|
const labelMap: Record<string, string> = {
|
||||||
|
physical: '实物',
|
||||||
|
virtual: '虚拟',
|
||||||
|
service: '服务',
|
||||||
|
};
|
||||||
|
return labelMap[type] || type;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取资产列表
|
||||||
|
const getAssetList = () => {
|
||||||
|
tableData.loading = true;
|
||||||
|
const params = {
|
||||||
|
...tableData.param,
|
||||||
|
status: tableData.param.status !== undefined ? tableData.param.status : undefined,
|
||||||
|
};
|
||||||
|
listAssets(params)
|
||||||
|
.then((res: any) => {
|
||||||
|
tableData.data = res.data?.list ?? [];
|
||||||
|
tableData.total = res.data?.total ?? 0;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
tableData.data = [];
|
||||||
|
tableData.total = 0;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
tableData.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置查询
|
||||||
|
const onResetQuery = () => {
|
||||||
|
tableData.param.name = '';
|
||||||
|
tableData.param.type = '';
|
||||||
|
tableData.param.status = undefined;
|
||||||
|
tableData.param.page = 1;
|
||||||
|
getAssetList();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 状态切换
|
||||||
|
const onStatusChange = (row: AssetRow) => {
|
||||||
|
updateAssetStatus(row.id, row.status)
|
||||||
|
.then(() => {
|
||||||
|
ElMessage.success('状态更新成功');
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// 失败时恢复原状态
|
||||||
|
row.status = row.status === 1 ? 0 : 1;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const onRowDel = (row: AssetRow) => {
|
||||||
|
ElMessageBox.confirm(`此操作将永久删除资产："${row.name}"，是否继续?`, '提示', {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteAsset(row.id).then(() => {
|
||||||
|
ElMessage.success('删除成功');
|
||||||
|
getAssetList();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改（待定）
|
||||||
|
const onEdit = (row: AssetRow) => {
|
||||||
|
ElMessage.info('修改功能待开发');
|
||||||
|
console.log('编辑资产:', row);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加SKU（待定）
|
||||||
|
const onAddSku = (row: AssetRow) => {
|
||||||
|
ElMessage.info('添加SKU功能待开发');
|
||||||
|
console.log('添加SKU:', row);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页大小改变
|
||||||
|
const onSizeChange = (size: number) => {
|
||||||
|
tableData.param.pageSize = size;
|
||||||
|
tableData.param.page = 1;
|
||||||
|
getAssetList();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 当前页改变
|
||||||
|
const onCurrentChange = (page: number) => {
|
||||||
|
tableData.param.page = page;
|
||||||
|
getAssetList();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getAssetList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.assets-asset-container {
|
||||||
|
.assets-asset-search {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user