添加正常/下架设备标签页切换功能；列表新增设备下架功能

1、交换机管理模块添加正常/下架设备标签页切换功能
2、正常设备与下架设备列表实现操作按钮差异化展示
3、列表新增设备下架功能
4、列表查询接口新增delFlag状态筛选参数

src/api/disRevenue/resource.js

@@ -494,6 +494,14 @@ export function updateSwitchManage(data) {
     data: data
   })
 }
+// 下架
+export function removeSwitch(query) {
+  return request({
+    url: '/system/switchManagement/removeSwitch',
+    method: 'post',
+    data: query
+  })
+}
 // 图形监控-基础信息
 export function switchMonitorData(data) {
   return request({

src/views/resource/switchRegister/index.vue

@@ -1,39 +1,43 @@
 <template>
-    <div class="app-container pageTopForm">
-        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
-          <el-col :span="6">
-              <el-form-item label="交换机名称" title="交换机名称" prop="queryName">
-                  <el-input
-                      v-model="queryParams.queryName"
-                      placeholder="请输入交换机名称"
-                      clearable
-                      @keyup.enter.native="handleQuery"/>
-              </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="交换机在线状态" title="交换机在线状态" prop="onlineStatus">
-              <el-select
-                v-model="queryParams.onlineStatus"
-                placeholder="请选择交换机在线状态"
-                clearable>
-                <el-option
-                  v-for="dict in dict.type.rm_register_online_state"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"/>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item class="lastBtnSty">
-                <el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
-                <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-col>
-        </el-form>
-
-        <!-- 表格数据 -->
-      <TableList :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
+  <div class="app-container">
+    <el-tabs v-model="activeName" @tab-click="handleClick('noRequest')">
+      <el-tab-pane label="正常设备" name="first"></el-tab-pane>
+      <el-tab-pane label="下架设备" name="second"></el-tab-pane>
+    </el-tabs>
+    <div class="pageTopForm">
+      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
+        <el-col :span="6">
+          <el-form-item label="交换机名称" title="交换机名称" prop="queryName">
+            <el-input
+              v-model="queryParams.queryName"
+              placeholder="请输入交换机名称"
+              clearable
+              @keyup.enter.native="handleQuery"/>
+        </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="交换机在线状态" title="交换机在线状态" prop="onlineStatus">
+            <el-select
+              v-model="queryParams.onlineStatus"
+              placeholder="请选择交换机在线状态"
+              clearable>
+              <el-option
+                v-for="dict in dict.type.rm_register_online_state"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item class="lastBtnSty">
+              <el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <!-- 表格数据 -->
+      <TableList ref="tabRef" :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
         <!--    资源类型    -->
         <template #tempType="{ row, column }">
           <dict-tag :options="dict.type.rm_register_resource_type" :value="row.resourceType"/>
@@ -72,10 +76,11 @@
         <MonitorStrategy :open="`type_${open}`" @dialogResult="fnDialogResult"></MonitorStrategy>
       </el-dialog>
     </div>
+  </div>
 </template>
 
 <script setup name="Register">
-    import {listSwitchManage} from '@/api/disRevenue/resource';
+    import {listSwitchManage, removeSwitch} from '@/api/disRevenue/resource';
     import TableList from '@/components/table/index.vue';
     // import MonitorStrategy from './monitorStrategy';
     import MonitorStrategy from '../switchMonitorStrat/monitorStrategy';
@@ -85,6 +90,8 @@
       dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state', 'rm_register_permission', 'rm_register_encryption', 'rm_register_security_level'],
       data() {
         return {
+          activeName: 'first',
+          cacheActiveName: 'first',
           open: false,
           roleList: [],
           loading: true,
@@ -115,12 +122,14 @@
             resourceUserName: { label: `用户名`, minWidth: '100'},
             resourcePwd: { label: `密码`, minWidth: '100'}
           },
-          config: {
+          config: {},
+          configDelFlag0: {
             tableButton: {
               top: [
                 {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:switchRegister:add'},
                 {content: '接口备注', fnCode: 'portRemarks', type: 'success', icon: 'el-icon-plus', hasPermi: 'resource:switchRegister:portRemarks'},
                 {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:switchRegister:export'},
+                {content: '下架', fnCode: 'unShelve', type: 'danger', icon: 'el-icon-bottom', hasPermi: 'resource:switchRegister:unShelve'},
               ],
               line: [
                 {content: '图形监控', fnCode: 'echartView', type: 'primary', icon: 'el-icon-data-analysis', hasPermi: 'rocketmq:switchInfo'},
@@ -133,10 +142,22 @@
               ]
             }
           },
+          configDelFlag1: {
+            tableButton: {
+              top: [
+                {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:switchRegister:export'},
+              ],
+              line: [
+                {content: '图形监控', fnCode: 'echartView', type: 'primary', icon: 'el-icon-data-analysis', hasPermi: 'rocketmq:switchInfo'},
+                {content: '详情', fnCode: 'details', type: 'primary', icon: 'el-icon-view', hasPermi: 'resource:switchRegister:details'},
+              ]
+            }
+          },
           queryParams: {
             pageNum: 1,
             pageSize: 10,
-            total: 0
+            total: 0,
+            delFlag: 0
           },
           keepAliveFirst: false,
         }
@@ -153,6 +174,15 @@
         });
       },
       methods: {
+        handleClick(val) {
+          if (val && val === 'noRequest' && this.cacheActiveName === this.activeName) return;
+          if (this.cacheActiveName !== this.activeName) {
+            this.queryParams = {pageNum: 1, pageSize: 10, total: 0};
+          }
+          this.cacheActiveName = this.activeName;
+          this.$refs.tabRef.showSearch = true;
+          this.getList();
+        },
         // 处理子组件传递的新值
         handleValueChange(newValue) {
           // 父组件更新自身数据，实现同步
@@ -161,7 +191,13 @@
         },
         /** 查询角色列表 */
         getList() {
-          this.loading = true
+          if (this.activeName === 'first') {
+            this.queryParams['delFlag'] = 0;
+            this.config = {...this.configDelFlag0};
+          } else if (this.activeName === 'second') {
+            this.queryParams['delFlag'] = 1;
+            this.config = {...this.configDelFlag1};
+          }
           listSwitchManage(this.addDateRange(this.queryParams)).then(response => {
             this.roleList = response.rows;
             this.queryParams.total = response.total;
@@ -195,7 +231,7 @@
         fnDialogResult(res){
           this.open = false;
         },
-        callback(result, rowData, selectChange) {
+        callback(result, rowData, selectChange, selectList) {
           // console.log('result==',result);
           if (result && result.fnCode) {
             switch (result.fnCode) {
@@ -233,6 +269,20 @@
               case 'monitorStrategy':
                 this.open = true;
                 break;
+              case 'unShelve':
+                if (selectList && selectList.length <= 0) {
+                  this.$modal.msgWarning("请选择数据！");
+                  return;
+                }
+                let unShelveContent = '<p style="font-size: 1rem;font-weight: 600;">下架</p>' +
+                  '<p style="height: 0px;margin-bottom: 50px;">所选交换机下架后将不再交换机管理列表中展示！';
+                this.$modal.confirm(unShelveContent).then(() => {
+                  removeSwitch({ids: selectChange}).then(response => {
+                    this.$modal.msgSuccess(response.msg);
+                    this.getList();
+                  });
+                }).catch(() => {});
+                break;
               case 'export':
                 // let dataList = [];
                 // Object.keys(this.columns).forEach(item => {
@@ -245,7 +295,6 @@
                 this.download("system/switchManagement/export", paramsList, `交换机管理_${new Date().getTime()}.xlsx`, null, 'json');
                 break;
               default:
-
             }
           }
         }