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="120" align="center" prop="custid" />
              <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
              <el-table-column label="证件类型" align="center" prop="idtype" :show-overflow-tooltip="true" >
                <template slot-scope="scope">
                  <span>身份证</span>
                </template>
              </el-table-column>
              <el-table-column label="证件号码" width="160" align="center" prop="idcard" :show-overflow-tooltip="true" />
              <el-table-column label="性别" align="center" prop="gender" width="70">
                  <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="150">
                <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="70" />
              <el-table-column label="客户等级" align="center" prop="level" width="80">
                <template slot-scope="scope">
                  <span>{{levelText(scope.row.custclass)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="270"
                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: "CustomerList",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户表格数据
      // userList: null,
      customerList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
    };
  },
  watch: {

  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      let that = this;
      that.loading = true;
      Object.assign(
        that.queryParams,
        that.$route.params
      )
      console.log(that.queryParams)
      if(that.queryParams.education){
        that.queryParams.education = that.queryParams.education.join("&");
      }
      console.log(that.queryParams)
        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}  })
    },
    toDetail(row){
      this.$router.push({ path:'/userInfoDetails', query: {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>