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="['system:role:export']"
              >导出</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.othernumber!=undefined && scope.row.othernumber!=''">其它证件类型</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!=''">{{scope.row.idcard}}</span>
                  <span v-else-if="scope.row.passport && scope.row.passport!=''">{{scope.row.passport}}</span>
                  <span v-else-if="scope.row.dlicense && scope.row.dlicense!=''">{{scope.row.dlicense}}</span>
                  <span v-else-if="scope.row.othernumber && scope.row.othernumber!=''">{{scope.row.othernumber}}</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>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { listCustomer } from "@/api/customerInformation/customerInformation.js";
  import axios from 'axios'
  export default {
  name: "UserInfoList",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户表格数据
      // userList: null,
      customerList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      cellWidth:'130',
      cellWidthS:'90',
      cellWidthB:'260',
    };
  },
  // 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.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;
      console.log(that.queryParams)
      Object.assign(
        that.queryParams,
        that.$route.params
      )
      // let params = Object.assign({pageNum: that.queryParams.pageNum}, this.$route.query )
      // console.log(params)
      // this.$router.push({params})
      if(that.queryParams.education){
        that.queryParams.education = that.queryParams.education.join("&");
      }

      // console.log(this.$route.params)
        listCustomer(that.queryParams).then(response => {
            console.log(response);
          this.customerList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );

    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('system/user/export', {
        ...this.queryParams
      }, `user_${new Date().getTime()}.xlsx`)
    },
    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>