10. CMDB前端开发-IDC管理

CMDB前端开发-IDC管理

IDC管理

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

2. 删除原先的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>

3. 登录之后初步效果展示如下

添加IDC列表分页

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

2. 调整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>

3. 前端效果展示

4. 后端效果展示

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>

2. 需要修改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)
...

3. 修改前端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>

4. 效果展示

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)

2. 前端删除配置

<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>

3. 效果展示

搜索功能

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>&nbsp;搜索</el-button>
         </div>
         <div class="tools-right">
             <el-button type="primary" @click="onSearch"><el-icon><search /></el-icon>&nbsp;创建</el-button>
             <el-button type="primary" @click="onSearch"><el-icon><search /></el-icon>&nbsp;展示列</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>

2. 效果展示

新建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)
...

2. 前端创建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>

3. 父组件引用： 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>&nbsp;搜索</el-button>
         </div>
         <div class="tools-right">
             <el-button type="primary" @click="createDialogVisible=true"><el-icon><Plus /></el-icon>&nbsp;创建</el-button>
             <el-button type="primary" @click="onSearch"><el-icon><Setting /></el-icon>&nbsp;展示列</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>
...

4. 效果展示

展示列功能开发

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>&nbsp;搜索</el-button>
         </div>
         <div class="tools-right">
             <el-button type="primary" @click="createDialogVisible=true"><el-icon><Plus /></el-icon>&nbsp;创建</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>&nbsp;展示列</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>

2. 效果展示

3. 刷新之后数据展示