ShangHaiLifeECIF/dgtis-ui/src/views/system/userInfoList/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <div class="panelCol">
          <div class="bgWhite">
            <div class="titleDiv">
              <span class="line"></span>
              <span class="title">客户信息列表</span>
              <el-button
                class="exportBtn"
                type="warning"
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['business:customerInformation:download']"
                :loading="exportLoading"
              >导出</el-button>
            </div>
            <el-table v-loading="loading" :data="customerList">
              <el-table-column label="客户号" :width="cellWidth" align="center" prop="custid" />
              <el-table-column label="姓名" :width="cellWidth" align="center" prop="name" :show-overflow-tooltip="true" />
              <el-table-column label="证件类型" :width="cellWidth" align="center" >
                <template slot-scope="scope">
                  <span v-if="scope.row.idcard!=undefined && scope.row.idcard!=''">身份证</span>
                  <span v-else-if="scope.row.passport!=undefined && scope.row.passport!=''">护照</span>
                  <span v-else-if="scope.row.dlicense!=undefined && scope.row.dlicense!=''">驾驶证</span>
                  <span v-else-if="scope.row.otheridnumber!=undefined && scope.row.otheridnumber!=''">其它证件类型</span>
                </template>
              </el-table-column>
              <el-table-column label="证件号码" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.idcard && scope.row.idcard!=''">{{cardNo(scope.row.idcard)}}</span>
                  <span v-else-if="scope.row.passport && scope.row.passport!=''">{{cardNo(scope.row.passport)}}</span>
                  <span v-else-if="scope.row.dlicense && scope.row.dlicense!=''">{{cardNo(scope.row.dlicense)}}</span>
                  <span v-else-if="scope.row.otheridnumber && scope.row.otheridnumber!=''">{{cardNo(scope.row.otheridnumber)}}</span>
                  <span v-else></span>
                </template>
              </el-table-column>
              <el-table-column label="性别" align="center" prop="gender" :width="cellWidthS">
                  <template slot-scope="scope">
                    <span v-if="scope.row.gender == 0">男</span>
                    <span v-else>女</span>
                  </template>
              </el-table-column>
              <el-table-column label="出生日期" align="center" :width="cellWidth">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.birthday,'{yy}-{mm}-{dd}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="年龄" align="center" prop="age" :width="cellWidthS" />
              <el-table-column label="客户等级" align="center" prop="level" :width="cellWidthS">
                <template slot-scope="scope">
                  <span>{{levelText(scope.row.custclass)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                :width="cellWidthB"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-copy-document"
                    @click="toOverview(scope.row)"
                    v-hasPermi="['business:customerInformation:overview']"
                  >概览</el-button>
                  <el-button
                    v-if="scope.row.userId !== 1"
                    size="mini"
                    type="cyan"
                    icon="el-icon-warning-outline"
                    @click="toDetail(scope.row)"
                    v-hasPermi="['business:customerInformation:detail']"
                  >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
<!--            <div :class="{'hidden':hidden}" class="pagination-container">-->
<!--              <el-pagination-->
<!--                background-->
<!--                :current-page="pageNum"-->
<!--                :page-size="queryParams.pageSize"-->
<!--                :layout="layout"-->
<!--                :page-sizes="pageSizes"-->
<!--                pager-count="11"-->
<!--                :total="total"-->
<!--                @size-change="sizeChange"-->
<!--                @prev-click="currentChange"-->
<!--                @next-click="currentChange"-->
<!--              />-->
<!--            </div>-->
            <div style="overflow: hidden;margin-top: 20px;">
              <div style="width: 330px;float: right;">
                <van-pagination
                  v-model="queryParams.pageNum"
                  :total-items="total"
                  :show-page-size="7"
                  force-ellipses
                  @change="currentChange"
                >
                  <template #prev-text>
                    <i class="el-icon-arrow-left"></i>
                  </template>
                  <template #next-text>
                    <i class="el-icon-arrow-right"></i>
                  </template>
                </van-pagination>
              </div>
            </div>


          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { listCustomer,listExport } from "@/api/customerInformation/customerInformation.js";
  import Axios from 'axios'
  import { tansParams } from "@/utils/ruoyi";
  import Vue from 'vue';
  import { Pagination } from 'vant';
  import 'vant/lib/index.css'

  Vue.use(Pagination);

  export default {
  name: "UserInfoList",
  components: {
    [Pagination.name]: Pagination,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户表格数据
      // userList: null,
      customerList: [],
      // 查询参数
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        // scrollId:'',
      },
      params:{},
      newQueryParams:{},
      cellWidth:'130',
      cellWidthS:'90',
      cellWidthB:'260',
      hidden:false,
      layout:'total, sizes, prev,pager,next',
      pageSizes:[10, 20, 30, 50],
      exportLoading:false,
    };
  },
  // watch: {
  //   $route: {
  //     handler: function(val, oldVal){
  //       console.log(val);
  //     },
  //     // 深度观察监听
  //     deep: true
  //   }
  // },
  beforeRouteEnter(to, from, next) {
    console.log(from)
    if (from.name === 'Index') {
      next(vm => {
        vm.queryParams.pageNum = 1;
        vm.getList();
      })
    } else if (!from.name) { // 处理刷新页面时，获取动态表单方法未执行，导致表单无法加载
      next(vm => {
        vm.getList();
      })
    } else {
      // 详情返回时只更新列表数据，因为如果在详情页面做了操作，列表数据状态会改变，其他使用缓存
      next(vm => {
        vm.getList();
      })
    }
  },
  created() {
    // this.getList();
  },
  mounted() {
    var clientWidth = document.body.clientWidth;
    var that = this;
    if(clientWidth <= 1370){
      that.cellWidth='120';
      that.cellWidthS='80';
      that.cellWidthB='160';
    }else{
      that.cellWidth='160';
      that.cellWidthS='120';
      that.cellWidthB='280';
    }
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      let that = this;
      that.loading = true;
      that.params = that.$route.query;
      console.log(that.$route.params)
      that.newQueryParams = {...that.queryParams,...that.params};

      if(that.newQueryParams.education){
          that.newQueryParams.education = that.newQueryParams.education.join("&");
      }
      console.log(that.newQueryParams)
        listCustomer(that.newQueryParams).then(response => {
            console.log(response);
          this.customerList = response.data.list;
          // if(response.data.scrollId != undefined && response.data.scrollId !=""){
          //   that.queryParams.scrollId = response.data.scrollId;
          // }else{
          //   that.queryParams.scrollId = '';
          // }
          this.total = response.data.total;
          this.loading = false;
        }
      );

    },
    currentChange(val){
      this.queryParams.pageNum = val;
      this.getList();
    },
    sizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.queryParams.scrollId = '';
      this.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      var that = this;
      that.exportLoading = true;
      this.downloadNew('data/customer/export', that.newQueryParams, `customer_${new Date().getTime()}.csv`).then(response => {
        console.log(response);
        if(response){
          that.exportLoading = false;
        }
      })
    },
    genUrl(encoded, options) {
      const dataBlob = new Blob([`\ufeff${encoded}`], { type: 'text/plain;charset=utf-8' });//返回的格式
      return window.URL.createObjectURL(dataBlob);
    },
    toOverview(row){
      this.$router.push({ path:'/userInfoOverview', query: {id: row.id}  })
      // this.$router.push({ name:'UserInfoOverview',params:{id: row.id}  })
    },
    toDetail(row){
      this.$router.push({ path:'/userInfoDetails', query: {id: row.id}  })
      // this.$router.push({ name:'UserInfoDetails',params:{id: row.id}  })
    }
  }
};
</script>
<style lang="scss" scoped>
  .titleDiv{
    height: 50px;
    line-height: 50px;
    .line{
      display: inline-block;
      height: 14px;
      width: 4px;
      border-radius: 2px;
      background: #013C89;
      vertical-align: middle;
    }
    .title{
      font-size: 16px;
      color: #013C89;
      margin-left: 14px;
      vertical-align: middle;
    }
    .exportBtn{
      float: right;
      margin-top: 10px;
    }
  }
</style>
<style>
  .van-pagination__item{
    min-width: 30px !important;
    height: 28px !important;
    border-radius: 2px;
    font-weight: bold;
    color: #606266;
  }
  .van-pagination__item--active{
    color: #FFF;
    background: #013C8A;
  }
  [class*=van-hairline]::after{
    border: none;
  }
  .van-pagination__item:active {
    color: #FFF;
    background-color: #013C8A;
  }
</style>