首页 > 其他分享 >10. CMDB前端开发-IDC管理

10. CMDB前端开发-IDC管理

时间:2023-05-20 18:01:14浏览次数:40  
标签:10 pageSize res 前端开发 currentPage getData data idc CMDB

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

  1. 效果展示

image-20230520173827901

image-20230520173919667

  1. 刷新之后数据展示

image-20230520173959445

标签:10,pageSize,res,前端开发,currentPage,getData,data,idc,CMDB
From: https://blog.51cto.com/devwanghui/6317673

相关文章

  • P1937 [USACO10MAR]Barn Allocation G
    BarnAllocationG题目描述农夫约翰最近开了一个新的牲口棚屋,并且现在接受来自奶牛的分配畜栏请求因为其中的一些畜栏有更好风景。畜栏包括N个畜栏(1≤N≤100,000),方便起见,我们把它们编号为1..N,畜栏i能容纳Ci只牛(1≤Ci≤100,000),第i只牛需要连续编号畜栏(从Ai到Bi)来漫......
  • Jmeter函数助手10-regexFunction
    regexFunction函数用于对上一个请求进行正则表达式提取处理,类似正则表达式。用于从前一个请求搜索结果的正则表达式:填入正则表达式Templateforthereplacementstring,usinggroupsfromtheregularexpression.Formatis$[group]$.Example$1$:填入匹配模板Whichmatch......
  • INFO3105 COBOL 设计
    INFO3105Week3Class1ReviewNumericEditedfieldsLab4IntroductiontoSummaryReportProgrammingwithCOBOLDefinitionofaControlBreak–“Achangeofcategoryusedtotriggerasubtotal.Forexample,ifdataaresubtotaledbyprovince,acontrolbreak......
  • day10-12 函数语法铺垫&函数的参数
    第八节函数【一】函数初识【一】函数的基本使用基于前一部分的学习,我们已经能开发一些功能简单的小程序了,但随着程序功能的增多,代码量随之增大,此时仍不加区分地把所有功能的实现代码放到一起,将会使得程序的组织结构不清晰,可读性变差,且程序中需要频繁使用同一功能时,只能重复......
  • 电脑微信占用100多GB空间 解决办法来了:重回清爽流畅
    这几天微信吃内存的话题又上热搜了,作为一款10亿+用户的国民级APP,微信的真是让人又爱又恨,不用几乎不可能,用起来槽点又多,光是磁盘占用就是个头疼的问题。不论是工作还是日常沟通,微信里面的文件及语音、视频都会很多,时间长了就会占用大量空间,手机上占用100多GB很常见,电脑版微信同样......
  • DAY10笔记及补充
    今日默写:1.创建数组的两种方式2.给数组赋值的两种方式3.for循环遍历数组4.描述下运算符的种类,并分别用代码展示下各自的使用方式5.if单分支,多分支各自的展示形式6.switch的使用方式得分:90补充:1.javascript变量可以由字母、数字、下划线以及美元符号组成,但是不能以数字开头2.j......
  • 1079. 活字印刷
    题目链接:1079.活字印刷方法:计数+回溯解题思路 先统计字符串中每种字符的个数cnt[26]{},对于每一层统计本层的节点,对应一种字符序列,再加上某节点的子节点的数量,返回最终结果代码classSolution{public:intnumTilePossibilities(stringtiles){intcnt[2......
  • 代码随想录算法训练营第十一天|20. 有效的括号、1047. 删除字符串中的所有相邻重复项
    【参考链接】20.有效的括号【注意】1.括号匹配是使用栈解决的经典问题。2.这个命令最后进入a目录,系统是如何知道进入了a目录呢,这就是栈的应用(其实可以出一道相应的面试题了)。3.有三种不匹配的情况,第一种情况,字符串里左方向的括号多余了;第二种情况,括号没有多余,但是括号的......
  • generator 1(矩阵优化递推式+10倍增优化)
     x1,bx2(开始值) ......
  • 1102 Invert a Binary Tree
    题目:ThefollowingisfromMaxHowell@twitter:Google:90%ofourengineersusethesoftwareyouwrote(Homebrew),butyoucan'tinvertabinarytreeonawhiteboardsofuckoff. Nowit'syourturntoprovethatYOUCANinvertabinarytree!I......