From 99a17d532c30fdc7af3a4de4e3cc1560b0708534 Mon Sep 17 00:00:00 2001
From: bibi <541660090@qq.com>
Date: Thu, 30 Dec 2021 14:36:25 +0800
Subject: [PATCH] 1

---
 public/index.html                             |   2 +-
 src/components/table/index.vue                |  49 ++++--
 src/views/Manage/CustomerList/index.vue       |   1 +
 .../Manage/SettleRequestManage/index.vue      |   1 +
 src/views/Manage/VillageManage/index.vue      | 155 ++++++++++++++++++
 5 files changed, 197 insertions(+), 11 deletions(-)
diff --git a/public/index.html b/public/index.html
index dfc4b35..79a7d7e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>saas平台</title>
+    <title>智慧小区平台</title>
   </head>
   <body>
     <noscript>
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index 227d15d..94d5ba2 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -1,28 +1,46 @@
 <template>
   <div class="main">
     <div style="margin-bottom: 16px">
-      <a-button type="primary" :disabled="!hasSelected" :loading="loading">
+      <!-- 批量操作 -->
+      <a-select
+        type="primary"
+        :disabled="!hasSelected"
+        :loading="loading"
+        style="width: 120px"
+        @change="Actions"
+        placeholder="请选择操作"
+      >
         批量
-      </a-button>
+        <a-select-option v-for="item in ActionsList" :key="item.value">
+          {{ item.label }}
+        </a-select-option>
+      </a-select>
       <span style="margin-left: 8px">
         <template v-if="hasSelected">
           {{ `已选择 ${selectedRowKeys.length} 条` }}
         </template>
       </span>
     </div>
+    <!-- 表格 -->
     <a-table
       :columns="columns"
       :data-source="tableData"
       :pagination="pagination"
-      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+      :scroll="{ x: 1300 }"
+      :row-selection="{
+        selectedRowKeys: selectedRowKeys,
+        onChange: selectionChoosed,
+      }"
       :row-key="
         (record, index) => {
           return index;
         }
       "
     >
-      <!-- <a slot="del" slot-scope="scope" @click="del(scope)">删除</a>
-      <span slot="formatter" slot-scope="scope" >{{scope}}</span> -->
+      <!-- 外头传进来的操作栏信息，data为表格循环出来的当前行数据信息 -->
+      <span slot="action" slot-scope="text, record">
+        <slot name="actionBox" :data="record"></slot>
+      </span>
     </a-table>
   </div>
 </template>
@@ -31,31 +49,42 @@
 export default {
   data() {
     return {
+      // 表格分页
       pagination: {
-        current: 1,
-        total: 0,
-        pageSize: 10,
         showTotal: (total) => `共 ${total} 条`,
         showSizeChanger: true,
         showQuickJumper: true,
       },
       loading: false,
+      // 选择的index
       selectedRowKeys: [],
     };
   },
   computed: {
+    // 是否选择selection
     hasSelected() {
       return this.selectedRowKeys.length > 0;
     },
   },
+  // 组件属性
   props: {
     columns: Array,
     tableData: Array,
+    ActionsList: Array,
   },
   methods: {
-    onSelectChange(selectedRowKeys) {
-      console.log('selectedRowKeys changed: ', selectedRowKeys);
+    // 选择selection
+    selectionChoosed(selectedRowKeys, data) {
       this.selectedRowKeys = selectedRowKeys;
+      this.$emit("selectionChoosed", data);
+    },
+    // 页码切换
+    handleTableChange(val) {
+      this.$emit("handleTableChange", val);
+    },
+    // 功能
+    Actions(val) {
+      this.$emit("Actions", val);
     },
   },
 };
diff --git a/src/views/Manage/CustomerList/index.vue b/src/views/Manage/CustomerList/index.vue
index 9e66a97..e928b70 100644
--- a/src/views/Manage/CustomerList/index.vue
+++ b/src/views/Manage/CustomerList/index.vue
@@ -166,6 +166,7 @@ export default {
       console.log(pagination);
       const pager = { ...this.pagination };
       pager.current = pagination.current;
+      pager.pageSize = pagination.pageSize;
       this.pagination = pager;
     },
   },
diff --git a/src/views/Manage/SettleRequestManage/index.vue b/src/views/Manage/SettleRequestManage/index.vue
index 121d2c8..588e659 100644
--- a/src/views/Manage/SettleRequestManage/index.vue
+++ b/src/views/Manage/SettleRequestManage/index.vue
@@ -167,6 +167,7 @@ export default {
       console.log(pagination);
       const pager = { ...this.pagination };
       pager.current = pagination.current;
+      pager.pageSize = pagination.pageSize;
       this.pagination = pager;
     },
   },
diff --git a/src/views/Manage/VillageManage/index.vue b/src/views/Manage/VillageManage/index.vue
index e69de29..338460d 100644
--- a/src/views/Manage/VillageManage/index.vue
+++ b/src/views/Manage/VillageManage/index.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <commonTable
+      :columns="columns"
+      :tableData="tableData"
+      :ActionsList="ActionsList"
+      @handleTableChange="handleTableChange"
+      @Actions="Actions"
+      @selectionChoosed="selectionChoosed"
+    >
+      <template v-slot:actionBox="data">
+        <a href="javascript:;" @click="del(data)">del</a>
+        <span style="margin: 5px">|</span>
+        <a href="javascript:;">detail</a>
+      </template>
+    </commonTable>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableChoosed: [],
+      // 分页
+      pagination: {
+        current: 1,
+        total: 0,
+        pageSize: 10,
+      },
+      //   列
+      columns: [
+        {
+          title: "Name",
+          dataIndex: "name",
+          width: "200",
+        },
+        {
+          title: "Gender",
+          dataIndex: "gender",
+          width: "200",
+          customRender: function (gender) {
+            if (gender === 1) {
+              return "是";
+            } else {
+              return "否";
+            }
+          },
+        },
+        {
+          title: "Gender1",
+          dataIndex: "gender1",
+          width: "200",
+        },
+        {
+          title: "Gender2",
+          dataIndex: "gender2",
+          width: "200",
+        },
+        {
+          title: "Gender3",
+          dataIndex: "gender3",
+          width: "200",
+        },
+        {
+          title: "Gender4",
+          dataIndex: "gender4",
+          width: "200",
+        },
+        {
+          title: "Gender5",
+          dataIndex: "gender5",
+          width: "200",
+        },
+        {
+          title: "Gender6",
+          dataIndex: "gender6",
+          width: "200",
+        },
+        {
+          title: "status",
+          dataIndex: "status",
+
+          width: "200",
+        },
+        {
+          title: "操作",
+          dataIndex: "action",
+          key: "action",
+          width: "180",
+          fixed: "right",
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      //   数据
+      tableData: [
+        { name: 1, gender: 1 },
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+      ],
+      ActionsList: [
+        {
+          label: "批量删除",
+          value: 1,
+        },
+        {
+          label: "批量导出",
+          value: 2,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleTableChange(pagination) {
+      console.log(pagination);
+      const pager = { ...this.pagination };
+      pager.current = pagination.current;
+      pager.pageSize = pagination.pageSize;
+      this.pagination = pager;
+    },
+    del(data) {
+      console.log(data);
+    },
+    Actions(data) {
+      console.log(data);
+    },
+    selectionChoosed(data) {
+      console.log(data);
+      this.tableChoosed = data
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
