0
点赞
收藏
分享

微信扫一扫

10. CMDB前端开发-IDC管理

10. CMDB前端开发-IDC管理

CMDB前端开发-IDC管理

IDC管理

  1. 首先需要将布局做一下调整, 目录结构如下

image-20230520122358438

  1. 删除原先的A~C.vue文件,修改router/index.js 路由文件如下:
...
const routes = [
{
path: '/login',
name: '登录',
component: () => import('../views/Login.vue')
},
{
path: '/',
name: '首页',
component: Layout,
redirect: '/dashboard',
children: [
{
path: '/dashboard',
name: '仪表盘',
icon: 'Monitor',
component: () => import('../views/dashboard/Dashboard.vue')
}
]
},
{
path: '/server',
name: '主机管理',
icon: 'Setting',
component: Layout,
children: [
{
path: '/idc',
name: '机房管理',
component: () => import('../views/idc/Idc')
},
{
path: '/server_group',
name: '主机分组',
component: () => import('../views/servergroup/ServerGroup')
},
{
path: '/server',
name: '服务器管理',
component: () => import('../views/server/Server')
},
]
},
{
path: '/sysconfig',
name: '系统配置',
icon: 'PieChart',
component: Layout,
children: [
{
path: '/credential',
name: '凭据管理',
component: () => import('../views/credential/Credential')
}
]
}
]
...

IDC列表雏形

  1. 启动cmdb后端
  2. 根据card, table文档实现初步布局: views/idc/Idc.vue
<template>
<el-card class=box-card>
<el-table :data=tableData style=width: 100%>
<el-table-column prop=name label=机房名称 width=180 />
<el-table-column prop=city label=所在城市 width=180 />
<el-table-column prop=provider label=提供商 />
<el-table-column prop=note label=备注 />
<el-table-column prop=create_time label=创建时间 />
<el-table-column flexd=right label=操作栏 width=120px>
<template #default>
<el-button link type=primary size=small @click=EditIdc>编辑</el-button>
<el-button link type=primary size=small @click=DeleteIdc>删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>

<script>
export default {
name: Idc,
data() {
return {
tableData: ''
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/')
.then(res => {
this.tableData = res.data.data
})
}
},
mounted() {
this.getData()
}
}
</script>

<style scoped>

</style>
  1. 登录之后初步效果展示如下

image-20230520122812950

添加IDC列表分页

  1. 确认后端需要具备分页能力

image-20230520124358916

  1. 调整idc视图,配置分页相关内容: views/idc/Idc.vue
<template>
<el-card class=box-card>
<el-table
:data=tableData
border=1px
style=width: 100%
>

<el-table-column prop=name label=机房名称 width=180 />
<el-table-column prop=city label=所在城市 width=180 />
<el-table-column prop=provider label=提供商 />
<el-table-column prop=note label=备注 />
<el-table-column prop=create_time label=创建时间 />
<el-table-column flexd=right label=操作栏 width=150px>
<template #default>
<el-button type=primary size=small @click=EditIdc>编辑</el-button>
<el-button type=danger size=small @click=DeleteIdc>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div style=margin-top: 20px>
<el-pagination
v-model:currentPage=currentPage
:page-sizes=[10, 15, 20, 25, 30]
:page-size=pageSize
layout=total, sizes, prev, pager, next, jumper
:total=total
background
@size-change=handleSizeChange
@current-change=handleCurrentChange
>

</el-pagination>
</div>
</el-card>
</template>

<script>
export default {
name: Idc,
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3
}
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;

})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
}
},
mounted() {
this.getData()
}
}
</script>

<style scoped>

</style>
  1. 前端效果展示

image-20230520132252651

image-20230520132315490

  1. 后端效果展示

image-20230520132346539

IDC信息编辑

  • 使用子组件IdcEdit.vue方式来简化Idc.vue 的代码量
  1. 新增子组件, 并配置好数据校验等: views/idc/IdcEdit.vue
<template>
<!--操作栏:编辑对话框-->
<el-dialog
:model-value=visible
width=30%
title=修改机房信息
@close=dialogClose
>

<el-form :model=row ref=formRef :rules=formRules label-position=right label-width=100px>
<el-form-item label=机房名称: prop=name>
<el-input v-model=row.name></el-input>
</el-form-item>
<el-form-item label=城市: prop=city>
<el-input v-model=row.city></el-input>
</el-form-item>
<el-form-item label=运营商: prop=provider>
<el-input v-model=row.provider></el-input>
</el-form-item>
<el-form-item label=备注:>
<el-input v-model=row.note type=textarea></el-input>
</el-form-item>
</el-form>

<template #footer>
<span class=dialog-footer>
<el-button @click=dialogClose>取消</el-button>
<el-button type=primary @click=submit>确定</el-button>
</span>
</template>
</el-dialog>
</template>

<script>
export default {
name: IdcEdit,
props: {
visible: Boolean,
row: '', //父组件传递过来的当前行数据
},
data() {
return {
//校验规则
formRules: {
name: [
{required: true, message: '请输入机房名称', trigger: 'blur'},
{min: 2, message: '机房名称长度应不小于2个字符', trigger: 'blur'}
],
city: [
{required: true, message: '请输入城市', trigger: 'blur'},
{min: 2, message: '城市长度应不小于2个字符', trigger: 'blur'}
],
provider: [
{required: true, message: '请输入运营商', trigger: 'blur'},
{min: 2, message: '运营商长度应不小于2个字符', trigger: 'blur'}
]
}
}

},
methods: {
//提交更新
submit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$http.put('/cmdb/idc/' + this.row.id + '/', this.row)
.then(res => {
if (res.data.code == 200){
this.$message.success(res.data.msg);
this.$parent.getData(); // 调用父组件方法,更新数据
this.dialogClose() // 关闭窗口
}
})
} else {
this.$message.error('格式错误!')
}
})
},
//关闭对话框,需要emit父组件关闭对话框
dialogClose() {
this.$emit('update:visible', false)
}
}
}
</script>

<style scoped>

</style>
  1. 需要修改idc后端视图: devops_api/cmdb/views.py
...
class IdcViewSet(ModelViewSet):
queryset = Idc.objects.all()
serializer_class = IdcSerializers
filter_backends = [filters.SearchFilter,filters.OrderingFilter,DjangoFilterBackend]
search_fields = (name,)
filterset_fields = (city,)
ordering_fields = (id,)
#重写更新方法
def update(self, request, *args, **kwargs):
partial = kwargs.pop('partial', False)
instance = self.get_object()
serializer = self.get_serializer(instance, data=request.data, partial=partial)
serializer.is_valid(raise_exception=True)
self.perform_update(serializer)
#res = {'code': 500, 'msg': '主机配置信息同步失败,错误信息: %s' % result['msg']}
res = {'code':200, 'msg': '修改成功'}
return Response(res)
...
  1. 修改前端Idc.vue, 实现父组件引用子组件: views/idc/Idc.vue
<template>
<el-card class=box-card>
<el-table
:data=tableData
border=1px
style=width: 100%
>

<el-table-column prop=name label=机房名称 width=180 />
<el-table-column prop=city label=所在城市 width=180 />
<el-table-column prop=provider label=提供商 />
<el-table-column prop=note label=备注 />
<el-table-column prop=create_time label=创建时间 />
<el-table-column flexd=right label=操作栏 width=150px>
<template #default=scope>
<el-button type=primary size=small @click=EditIdc(scope.$index,scope.row)>编辑</el-button>
<el-button type=danger size=small @click=DeleteIdc=(scope.$index,scope.row)>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div style=margin-top: 20px>
<el-pagination
v-model:currentPage=currentPage
:page-sizes=[10, 15, 20, 25, 30]
:page-size=pageSize
layout=total, sizes, prev, pager, next, jumper
:total=total
background
@size-change=handleSizeChange
@current-change=handleCurrentChange
>

</el-pagination>
</div>
</el-card>
<!-- idc编辑-->
<IdcEdit v-model:visible=editDialogVisible :row=currentRow></IdcEdit>
</template>

<script>
import IdcEdit from @/views/idc/IdcEdit;
export default {
name: Idc,
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3
},
currentRow: '',
editDialogVisible: false
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;

})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
},
EditIdc(index,row) {
this.editDialogVisible = true;
this.currentRow = row; //将当前行内容传递到子组件
},
DeleteIdc(index) {}
},
mounted() {
this.getData()
},
components: {
IdcEdit
}
}
</script>

<style scoped>

</style>
  1. 效果展示

image-20230520153150033

image-20230520153215662

IDC 信息删除

  1. idc后端视图调整: devops_api/cmdb/views.py
class IdcViewSet(ModelViewSet):
queryset = Idc.objects.all()
serializer_class = IdcSerializers
filter_backends = [filters.SearchFilter,filters.OrderingFilter,DjangoFilterBackend]
search_fields = (name,)
filterset_fields = (city,)
ordering_fields = (id,)
#重写更新方法
def update(self, request, *args, **kwargs):
partial = kwargs.pop('partial', False)
instance = self.get_object()
serializer = self.get_serializer(instance, data=request.data, partial=partial)
serializer.is_valid(raise_exception=True)
self.perform_update(serializer)
#res = {'code': 500, 'msg': '主机配置信息同步失败,错误信息: %s' % result['msg']}
res = {'code':200, 'msg': '修改成功'}
return Response(res)
#重写删除方法
def destroy(self, request, *args, **kwargs):
instance = self.get_object()
try:
self.perform_destroy(instance)
res = {'code': 200, 'msg': '删除成功'}
except Exception as e:
res = {'code': 500, 'msg': '机房存在关联信息,删除之后再操作'}
return Response(res)
  1. 前端删除配置
<template>
<el-card class=box-card>
<el-table
:data=tableData
border=1px
style=width: 100%
>

<el-table-column prop=name label=机房名称 width=180 />
<el-table-column prop=city label=所在城市 width=180 />
<el-table-column prop=provider label=提供商 />
<el-table-column prop=note label=备注 />
<el-table-column prop=create_time label=创建时间 />
<el-table-column flexd=right label=操作栏 width=150px>
<template #default=scope>
<el-button type=primary size=small @click=EditIdc(scope.$index,scope.row)>编辑</el-button>
<el-button type=danger size=small @click=DeleteIdc(scope.$index,scope.row)>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div style=margin-top: 20px>
<el-pagination
v-model:currentPage=currentPage
:page-sizes=[10, 15, 20, 25, 30]
:page-size=pageSize
layout=total, sizes, prev, pager, next, jumper
:total=total
background
@size-change=handleSizeChange
@current-change=handleCurrentChange
>

</el-pagination>
</div>
</el-card>
<!-- idc编辑-->
<IdcEdit v-model:visible=editDialogVisible :row=currentRow></IdcEdit>
</template>

<script>
import IdcEdit from @/views/idc/IdcEdit;
export default {
name: Idc,
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3
},
currentRow: '',
editDialogVisible: false
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;

})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
},
EditIdc(index,row) {
this.editDialogVisible = true;
this.currentRow = row; //将当前行内容传递到子组件
},
DeleteIdc(index,row) {
this.$confirm(你确定要删除选中的吗?, 提示, {
confirmButtonText: 确定,
cancelButtonText: 取消,
type: warning
})
.then(() => { // 点击确定
this.$http.delete('/cmdb/idc/'+ row.id + '/')
.then(res => {
if(res.data.code === 200) {
this.$message.success(res.data.msg);
this.tableData.splice(index, 1); // 根据表格索引临时删除数据
}
});
})
}
},
mounted() {
this.getData()
},
components: {
IdcEdit
}
}
</script>

<style scoped>

</style>
  1. 效果展示

image-20230520160603793

image-20230520160653523

搜索功能

  1. 在前端views/idc/Idc.vue进行配置
<template>
<el-card class=box-card>
<div class=tools>
<!-- 搜索框-->
<div class=tools-left>
<el-input
v-model=urlParams.search
placeholder=请输入关键字
@keyup.enter=onSearch
clearable
@clear=onSearch
class=search
/>

<el-button type=primary @click=onSearch><el-icon><search /></el-icon>搜索</el-button>
</div>
<div class=tools-right>
<el-button type=primary @click=onSearch><el-icon><search /></el-icon>创建</el-button>
<el-button type=primary @click=onSearch><el-icon><search /></el-icon>展示列</el-button>
</div>

</div>
...
</template>
<script>
import IdcEdit from @/views/idc/IdcEdit;
export default {
name: Idc,
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3,
search: ''
},
currentRow: '',
editDialogVisible: false
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;

})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
},
EditIdc(index,row) {
this.editDialogVisible = true;
this.currentRow = row; //将当前行内容传递到子组件
},
DeleteIdc(index,row) {
this.$confirm(你确定要删除选中的吗?, 提示, {
confirmButtonText: 确定,
cancelButtonText: 取消,
type: warning
})
.then(() => { // 点击确定
this.$http.delete('/cmdb/idc/'+ row.id + '/')
.then(res => {
if(res.data.code === 200) {
this.$message.success(res.data.msg);
this.tableData.splice(index, 1); // 根据表格索引临时删除数据
}
});
})
},
onSearch() {
this.getData()
}
},
mounted() {
this.getData()
},
components: {
IdcEdit
}
}
</script>

<style scoped>
.tools {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.tools-left {
display: flex;
}
.tools-right {
display: flex;
}
.search {
width: 150px;
margin-right: 10px;
}

</style>
  1. 效果展示

image-20230520163903591

新建idc数据

  1. 修改后端代码,新建视图调整: devops_api/cmdb/views.py
...
class IdcViewSet(ModelViewSet):
queryset = Idc.objects.all()
serializer_class = IdcSerializers
filter_backends = [filters.SearchFilter,filters.OrderingFilter,DjangoFilterBackend]
search_fields = (name,)
filterset_fields = (city,)
ordering_fields = (id,)
#重写更新方法
def update(self, request, *args, **kwargs):
partial = kwargs.pop('partial', False)
instance = self.get_object()
serializer = self.get_serializer(instance, data=request.data, partial=partial)
serializer.is_valid(raise_exception=True)
self.perform_update(serializer)
#res = {'code': 500, 'msg': '主机配置信息同步失败,错误信息: %s' % result['msg']}
res = {'code':200, 'msg': '修改成功'}
return Response(res)
#重写删除方法
def destroy(self, request, *args, **kwargs):
instance = self.get_object()
try:
self.perform_destroy(instance)
res = {'code': 200, 'msg': '删除成功'}
except Exception as e:
res = {'code': 500, 'msg': '机房存在关联信息,删除之后再操作'}
return Response(res)
#重写创建方法
def create(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
try:
self.perform_create(serializer)
res = {'code': 200, 'msg': '创建idc成功'}
except Exception as e:
res = {'code': 500, 'msg': '创建idc失败%s'%e}
return Response(res)
...
  1. 前端创建idc子组件: views/idc/IdcCreate.vue
<template>
<el-dialog
:model-value=visible
width=30%
title=创建机房
@close=dialogClose
>

<el-form :model=form ref=formRef :rules=formRules label-position=right label-width=100px >
<el-form-item label=机房名称: prop=name>
<el-input v-model=form.name></el-input>
</el-form-item>
<el-form-item label=城市: prop=city>
<el-input v-model=form.city></el-input>
</el-form-item>
<el-form-item label=运营商: prop=provider>
<el-input v-model=form.provider></el-input>
</el-form-item>
<el-form-item label=备注:>
<el-input v-model=form.note type=textarea></el-input>
</el-form-item>
</el-form>

<template #footer>
<span class=dialog-footer>
<el-button @click=dialogClose>取消</el-button>
<el-button type=primary @click=submit>确定</el-button>
</span>
</template>
</el-dialog>
</template>

<script>
export default {
name: IdcCreate,
props: {
visible: Boolean,
},
data() {
return {
form: {
'name': '',
'city': '',
'provider': '',
'note': ''
},
formRules: {
name: [
{required: true, message: '请输入机房名称', trigger: 'blur'},
{min: 2, message: '机房名称长度应不小于2个字符', trigger: 'blur'}
],
city: [
{required: true, message: '请输入城市', trigger: 'blur'},
{min: 2, message: '城市长度应不小于2个字符', trigger: 'blur'}
],
provider: [
{required: true, message: '请输入运营商', trigger: 'blur'},
{min: 2, message: '运营商长度应不小于2个字符', trigger: 'blur'}
]
},
}
},
methods: {
submit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$http.post('/cmdb/idc/', this.form)
.then(res => {
if (res.data.code === 200){
this.$message.success(res.data.msg);
this.$parent.getData(); // 调用父组件方法,更新数据
this.dialogClose() // 关闭窗口
}
})
} else {
this.$message.error('格式错误!')
}
})
},
// 点击关闭,子组件通知父组件更新属性
dialogClose() {
this.$emit('update:visible', false) // 父组件必须使用v-model
}
}
}
</script>

<style scoped>

</style>
  1. 父组件引用: views/idc/Idc.vue
<template>
<el-card class=box-card>
<div class=tools>
<!-- 搜索框-->
<div class=tools-left>
<el-input
v-model=urlParams.search
placeholder=请输入关键字
@keyup.enter=onSearch
clearable
@clear=onSearch
class=search
/>

<el-button type=primary @click=onSearch><el-icon><search /></el-icon>搜索</el-button>
</div>
<div class=tools-right>
<el-button type=primary @click=createDialogVisible=true><el-icon><Plus /></el-icon>创建</el-button>
<el-button type=primary @click=onSearch><el-icon><Setting /></el-icon>展示列</el-button>
</div>
</div>
...
<!-- idc编辑-->
<IdcEdit v-model:visible=editDialogVisible :row=currentRow></IdcEdit>
<!-- idc创建-->
<IdcCreate v-model:visible=createDialogVisible></IdcCreate>
</template>
<script>
import IdcEdit from @/views/idc/IdcEdit;
import IdcCreate from @/views/idc/IdcCreate;
export default {
name: Idc,
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3,
search: ''
},
currentRow: '',
editDialogVisible: false,
createDialogVisible: false
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;

})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
},
EditIdc(index,row) {
this.editDialogVisible = true;
this.currentRow = row; //将当前行内容传递到子组件
},
DeleteIdc(index,row) {
this.$confirm(你确定要删除选中的吗?, 提示, {
confirmButtonText: 确定,
cancelButtonText: 取消,
type: warning
})
.then(() => { // 点击确定
this.$http.delete('/cmdb/idc/'+ row.id + '/')
.then(res => {
if(res.data.code === 200) {
this.$message.success(res.data.msg);
this.tableData.splice(index, 1); // 根据表格索引临时删除数据
}
});
})
},
onSearch() {
this.getData()
}
},
mounted() {
this.getData()
},
components: {
IdcEdit,
IdcCreate
}
}
</script>
...
  1. 效果展示

image-20230520170337866

image-20230520170352922

展示列功能开发

  1. 展示列配置
<template>
<el-card class=box-card>
<div class=tools>
<!-- 搜索框-->
<div class=tools-left>
<el-input
v-model=urlParams.search
placeholder=请输入关键字
@keyup.enter=onSearch
clearable
@clear=onSearch
class=search
/>

<el-button type=primary @click=onSearch><el-icon><search /></el-icon>搜索</el-button>
</div>
<div class=tools-right>
<el-button type=primary @click=createDialogVisible=true><el-icon><Plus /></el-icon>创建</el-button>
<!--展示列弹出框-->
<el-popover placement=left :width=100 v-model:visible=columnVisible>
<template #reference>
<el-button type=primary @click=columnVisible=true><el-icon><setting /></el-icon>展示列</el-button>
</template>
<el-checkbox v-model=showColumn.name disabled>机房名称</el-checkbox>
<el-checkbox v-model=showColumn.city>城市</el-checkbox>
<el-checkbox v-model=showColumn.provider>运营商</el-checkbox>
<el-checkbox v-model=showColumn.note>备注</el-checkbox>
<el-checkbox v-model=showColumn.create_time>创建时间</el-checkbox>
<!-- 新增选择内容持久化配置-->
<div style=text-align: right; margin: 0>
<el-button size=small type=text @click=columnVisible = false>取消</el-button>
<el-button size=small type=primary @click=saveColumn>确认</el-button>
</div>
</el-popover>
</div>
</div>
<el-table
:data=tableData
border=1px
style=width: 100%
>

<el-table-column prop=name label=机房名称/>
<el-table-column prop=city label=所在城市 v-if=showColumn.city/>
<el-table-column prop=provider label=提供商 v-if=showColumn.provider/>
<el-table-column prop=note label=备注 v-if=showColumn.note />
<el-table-column prop=create_time label=创建时间 v-if=showColumn.create_time/>
<el-table-column flexd label=操作栏 width=150px>
<template #default=scope>
<el-button type=primary size=small @click=EditIdc(scope.$index,scope.row)>编辑</el-button>
<el-button type=danger size=small @click=DeleteIdc(scope.$index,scope.row)>删除</el-button>
</template>
</el-table-column>
</el-table>
...
</template>
<script>
import IdcEdit from @/views/idc/IdcEdit;
import IdcCreate from @/views/idc/IdcCreate;
export default {
name: Idc,
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3,
search: ''
},
currentRow: '',
editDialogVisible: false,
createDialogVisible: false,
columnVisible: false, // 可展示列显示与隐藏
showColumn: {
name: true,
city: true,
provider: true,
note: true,
create_time: true
}
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;

})
},
...
saveColumn() {
// 将可显示的字段存储到浏览器本地存储
localStorage.setItem(this.$route.path + '-columnSet', JSON.stringify(this.showColumn));
this.columnVisible = false;
}
},
mounted() {
this.getData()
const columnSet = localStorage.getItem(this.$route.path + '-columnSet');
if(columnSet) {
this.showColumn = JSON.parse(columnSet)
}
},
components: {
IdcEdit,
IdcCreate
}
}
</script>

  1. 效果展示

image-20230520173827901

image-20230520173919667

  1. 刷新之后数据展示

image-20230520173959445

举报

相关推荐

0 条评论