[feat](访问规则配置): 列表按钮交互

src/page/main/config/accessRule/index.vue

@@ -10,7 +10,7 @@
               新增
             </el-button>
             <el-button @click="deleteBatch"> 批量删除 </el-button>
-            <span class="sleceted_tip">已选<span class="num">3</span>项</span>
+            <span class="sleceted_tip">已选<span class="num">{{selection.length}}</span>项</span>
             <span class="clean" @click="cleanSelected">清空</span>
           </div>
         </template>
@@ -36,7 +36,8 @@
         </template>
       </bg-filter-group>
       <div class="table_container">
-        <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :stripe="true" select>
+        <bg-table ref="rulesTable" :headers="headers" :rows="tableRows" :stripe="true" select @selectAc="selectRows" canEdit
+            canEditFlag="state">
           <template v-slot:rule_type="{ row }">
             <span>{{ ["", "IP"][row.rule_type] }}</span>
           </template>
@@ -57,7 +58,7 @@
           <template v-slot:action="{ row }">
             <bg-table-btns2 :limit="3" :key="row.id">
               <bg-table-btn @click="edit(row)">编辑</bg-table-btn>
-              <bg-table-btn @click="deleteCurrent(row)">删除</bg-table-btn>
+              <bg-table-btn :disabled="row.state == 1" @click="deleteCurrent(row)">删除</bg-table-btn>
             </bg-table-btns2>
           </template>
         </bg-table>
@@ -102,7 +103,11 @@
                 <span>{{ data.name }}</span>
               </template>
             </el-cascader>
-            <el-input placeholder="请输入关键词" style="width: 200px; margin-left: 16px" :prefix-icon="Search" />
+            <el-input
+              placeholder="请输入关键词"
+              v-model.trim="userFilter.search"
+              style="width: 200px; margin-left: 16px"
+              :prefix-icon="Search" />
           </div>
           <div class="right">
             <el-button type="primary" @click="searchUsers">查询</el-button>
@@ -111,9 +116,9 @@
         </div>
 
         <div class="table_content">
-          <bg-table ref="bgTable" :headers="userHeaders" :rows="userTableRows" height="430" :stripe="true">
+          <bg-table ref="bgUserTable" :headers="userHeaders" :rows="userTableRows" height="430" :stripe="true">
             <template v-slot:isAdmin="{ row }">
-              <span>{{ ["", "业务系统用户","组织管理员","平台用户"][row.isAdmin] }}</span>
+              <span>{{ ["", "业务系统用户", "组织管理员", "平台用户"][row.isAdmin] }}</span>
             </template>
           </bg-table>
           <bg-pagination
@@ -130,7 +135,7 @@
 </template>
 
 <script setup>
-import { reactive, toRefs, computed, onBeforeMount } from "vue";
+import { reactive, toRefs, computed, onBeforeMount ,ref} from "vue";
 import { Search } from "@element-plus/icons-vue";
 import { useRouter } from "vue-router";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
@@ -140,6 +145,8 @@ import { ElMessage } from "element-plus";
 import { dateStringTransform } from "@/services/helper.js";
 
 const router = useRouter();
+
+const rulesTable = ref(null)
 const state = reactive({
   filter: {
     search: "",
@@ -231,6 +238,7 @@ const state = reactive({
   ],
   userTableRows: [],
   userTableTotal: 0,
+  selection: [],
 });
 
 const getOrgList = () => {
@@ -286,13 +294,21 @@ const getTableRows = () => {
     });
 }; // 获取表格数据
 
+const selectRows = (data) => {
+  state.selection = data.selection;
+}
+
 const addRule = () => {
   // 新增规则跳转
 }; //新增
 
-const deleteBatch = () => {}; //批量删除
+const deleteBatch = () => {
+  console.log(state.selection)
+}; //批量删除
 
-const cleanSelected = () => {}; //清空
+const cleanSelected = () => {
+  rulesTable.value.clearTable();
+}; //清空
 
 const stateChange = (row) => {
   axios.put(`/apaas/system/v5/accessRule/updateState?id=${row.id}&state=${row.state}`).then((res) => {
@@ -358,7 +374,9 @@ const edit = (row) => {
   // router.push(`/develop/account/add`);
 }; //编辑
 
-const deleteCurrent = (row) => {}; //删除
+const deleteCurrent = (row) => {
+  
+}; //删除
 
 const {
   filter,
@@ -372,6 +390,7 @@ const {
   userFilter,
   userTypeList,
   orgList,
+  selection,
 } = toRefs(state);
 
 onBeforeMount(() => {