导出党员功能同步

src/views/components/xiaoqu/rightData/colorList.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="color-list">
-    <div class="list-item" v-for="(item, index) in colorListL" :key="index">
+    <div
+      class="list-item"
+      v-for="(item, index) in colorListL"
+      :key="index"
+      @click="handlerExportIsD(item.name)"
+    >
       <div class="item-name">
         <ColorCell
           :item="item"
@@ -25,6 +30,19 @@
         <span> 人 </span>
       </div>
     </div>
+
+    <!-- 导出弹窗 -->
+    <el-dialog
+      :visible.sync="open"
+      append-to-body
+      custom-class="taicang-dialog-small"
+    >
+      <div class="dialog-main">
+        <div class="dialog-title"><span></span>{{ title }}</div>
+
+        <export-table></export-table>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -32,12 +50,16 @@
 import { mapGetters } from "vuex";
 import ColorCell from "@/components/ColorCell";
 import { getColorList } from "@/api/taicangpop/new.js";
+import exportTable from "./exportTable.vue";
 export default {
   components: {
     ColorCell,
+    exportTable,
   },
   data() {
     return {
+      title: "",
+      open: false,
       colorListL: [],
     };
   },
@@ -56,6 +78,12 @@ export default {
     this.getColor();
   },
   methods: {
+    handlerExportIsD(name) {
+      if (name == "中共党员") {
+        this.title = name;
+        this.open = true;
+      }
+    },
     async getColor() {
       let res = await getColorList(this.queryParamsXiaoqu);
       this.colorListL = this.resetColor(res.data);

src/views/components/xiaoqu/rightData/exportTable.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="search-container">
+    <div class="option-rows">
+      <imageButton size="medium" @handlerClcik="handleExport">导出</imageButton>
+    </div>
+    <div class="result-list">
+      <div class="list-header">
+        <div class="header-left-total">
+          搜索结果列表
+          <!-- {{ houseTotal }}户 {{ total }}人 -->
+        </div>
+        <div class="header-rigth-total">共{{ total }}条数据</div>
+      </div>
+      <div
+        class="list-table"
+        v-loading="loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        element-loading-text="加载中"
+      >
+        <div class="table-header">
+          <div class="table-cell0">序号</div>
+          <div class="table-cell1">姓名</div>
+          <div class="table-cell1">证件号</div>
+          <div class="table-cell1">手机号</div>
+          <!-- <div class="table-cell2">家庭地址</div> -->
+          <div class="table-cell1">分色</div>
+        </div>
+        <div
+          class="table-body"
+          style="overflow: auto"
+          v-infinite-scroll="load"
+          :infinite-scroll-distance="10"
+          :infinite-scroll-delay="500"
+        >
+          <div
+            class="body-rows"
+            v-for="(item, index) in list"
+            :key="'rows' + index"
+          >
+            <div class="table-cell0">{{ index + 1 }}</div>
+            <div class="table-cell1">{{ item.name }}</div>
+            <div class="table-cell1">{{ item.credentialNo }}</div>
+            <div class="table-cell1">{{ item.phone }}</div>
+            <!-- <div class="table-cell2">
+              {{
+                item.shequ_name +
+                item.xiaoqu_name +
+                item.deptname +
+                item.buildingname +
+                item.housename
+              }}
+            </div> -->
+            <div class="table-cell1 cell-flex">
+              <ColorCell :item="item" />
+              <span style="margin-left: 3px">{{ item.color }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { listPerson, exportPerson } from "@/api/taicangpop/person.js";
+import ColorCell from "@/components/ColorCell";
+import { handleColor } from "@/utils/myFuntion.js";
+export default {
+  components: {
+    ColorCell,
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      loading: false,
+      queryParams: {
+        isD: 1,
+        pageNum: 1,
+        pageSize: 20,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["queryParamsXiaoqu"]),
+  },
+  methods: {
+    load() {
+      if (this.list.length > 0 && this.list.length >= this.total) return;
+      this.getList();
+    },
+    /**
+     * 获取list
+     */
+    async getList() {
+      this.loading = true;
+      this.queryParams.xiaoquId = this.queryParamsXiaoqu.xiaoquId;
+      this.queryParams.buildingId = this.queryParamsXiaoqu.buildingId;
+      let result = await listPerson(this.queryParams);
+      let data = handleColor(result.rows);
+
+      this.list = [...this.list, ...data];
+      this.total = result.total;
+      this.queryParams.pageNum++;
+      this.loading = false;
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal
+        .confirm("是否确认导出党员数据？")
+        .then(() => {
+          return exportPerson(queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/isTable.scss";
+</style>