history.vue

<template>
  <div class="main">
    <div class="titles" style="height:40px;">
      <span>同步成员历史</span>
      <el-button class="button buttondark" size="small" @click="handleCancel"
        >返回</el-button
      >
    </div>
    <div class="lists">
      <el-table
        stripe
        class="list"
        ref="multipleTable"
        :data="main"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="setListsHeadStyle"
        height="calc(100vh - 300px)"
      >
        <el-table-column
          label="序号"
          width="120"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="240" >
          <template slot-scope="scope">
              <span><img :src="scope.row.thumbAvatar" alt="" style="width:60px;height60px;"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          label="姓名"
          align="center"
           width="240"
        ></el-table-column>
        <el-table-column
          prop="userId"
          label="企业微信号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bar"
          label="更新时间"
          align="center"
    
        ></el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-size="page.size"
        layout="total, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getHistoryList } from "@/api/in/mail"
export default {
  
  data() {
    return {
      main: [],
      list: {      
        search: {
          bar: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ],
          taskType: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ]
        }
      },
      data: {
        search: {
          bar: "",
          taskType: "",
          date: "",
          keys: ""
        }
      },
      isShow: true,
      page: {
        currentPage: 1,
        size: 20,
        total: 0
      },
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {      
      let params = {
        pageNum: 1
      }
      getHistoryList(params).then(res => {
        // console.log(res,"res");
        this.main = res.data.pageInfo.list
        this.page.total = Number(res.data.pageInfo.total)
      })
    },
    setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
      } else {
        return "";
      }
    },
    handleCurrentChange() {},
    handleCancel() {
      this.isShow = false;
      this.$emit("isShow", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.titles {
  height: 48px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f8f8f8;
}
.btn {
  font-size: 14px;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.main {
  width: 100%;
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  height: 100%;
  padding: 0px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0px 2px 4px 0px #ddd;
}
.searchs {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.buttons {
  width: 266px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.buttonlight {
  background-color: #e8e9fe;
  color: #4e59c7;
  border: 1px solid #4e59c7;
  box-sizing: border-box;
}

.buttondark {
  width: 88px;
  height: 32px;
  background-color: #4e59c7;
  color: #ffffff;
  border: 1px solid #4e59c7;
  box-sizing: border-box;
}

.searchzone {
  height: 40px;
  width: auto;
  min-width: 654px;
  text-align: right;
}
.lists {
  height: auto;
  min-height: 70%;
  width: 100%;
  margin-top: 20px;
}
.listButtonRed {
  color: red;
}
.pages {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
</style>