1

3 years ago · 99a17d532c
parent 87a95f5a7e
commit 99a17d532c
5 changed files with 197 additions and 11 deletions
--- 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>
--- 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);
    },
  },
 };
--- 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;
    },
  },
--- 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;
    },
  },
--- 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>